css实现垂直居中的常用技巧

在实际开发过程中，我们经常会遇到让某个盒子在其父元素内居中的需求。而在布局中，居中又分为垂直居中与水平居中。水平居中的实现方法很简单，设置margin: 0 auto; 就行，而垂直居中相对来说就麻烦了很多，下面就来说说工作中我用到过的一些方法：

首先，来两个盒子out_box与inner_box：

 

 

父盒子out_box为灰色背景，子盒子inner_box为蓝色背景，我们要让蓝色盒子居中与灰色盒子内部。首先让蓝色盒子水平居中：

 

 

接下来实现垂直居中，我用过一下几种方法：

1、定位+边距法：

 

先是给父元素加position: relative; 子元素加position: absolute; 让子元素相对于父元素定位，然后设置top: 50%; 这是子元素会相对父子元素乡下移动父元素高度一般的距离（250px），我们再给子元素加 margin-top: -100px; 让子元素再往上移动自身高度一半的距离，所以，最终子元素距离父子元素上下边距为 （父元素高度*50% -子元素高度*50%），就垂直居中了。

由于我们给子元素加了position: absolute; 这个属性，所以用margin: 0 auto; 的方式水平居中就无效了，因此，用与设置垂直居中相同的方法来设置水平居中。（left: 50%; margin-left: -100px;）

 

2、absolute+auto

 

给父元素设置position: relative; 子元素设置 position: absolute; 在给子元素上下左右四边定位收设为0；最后设置四边的margin为auto；就能让子元素居中与父元素了。

使用这个方法要注意的是，子元素的高度与宽度必须固定，不能是自适应，否则就会铺满父元素。

 

3、css3的flex布局

这是css3推出的弹性布局，适用于一些新版本的浏览器，实现方法很简单，只要给父元素设置display: flex; ，再规定父元素内的子元素的对其方式即可，对于flex布局有很多知识点，想要详细了解的可以去看阮一峰老师的博客http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html：

 

 

除了以上说的这三种方法之外，还有很多种，只是在开发中，我觉得这三种用起来更简单快捷一些。