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

比眉伴天荒 2022-06-12 02:11 227阅读 0赞

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

首先，来两个盒子out\_box与inner\_box：

![Center][]

![Center 1][]

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

![Center 2][]

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

1、定位\+边距法：

![Center 3][]

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

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

![Center 4][]

2、absolute+auto

![Center 5][]

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

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

![Center 6][]

3、css3的flex布局

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

![Center 7][]

![Center 8][]

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

[Center]: /images/20220612/af044150176943918f58d89adbc59b1b.png
[Center 1]: /images/20220612/15eb3661f7bd4a8084acf88e283b1cc7.png
[Center 2]: /images/20220612/f95bfb2f49544315ab2d7b2714feff72.png
[Center 3]: /images/20220612/b8d9c220e1364fdf92ac0490f6d30670.png
[Center 4]: /images/20220612/84d20879ad474afcaba6ec9c2236917c.png
[Center 5]: /images/20220612/833011450ba24682906e4e2fbfd1c61f.png
[Center 6]: /images/20220612/1e4e2d4c67fa457291b4fff117d3c46f.png
[http_www.ruanyifeng.com_blog_2015_07_flex-grammar.html]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[Center 7]: /images/20220612/fdd51be9a0a840ecb5ce509a0cfcd08d.png
[Center 8]: /images/20220612/45ca94843bb542a8a9ee29ee28189f2d.png