在实际开发过程中,我们经常会遇到让某个盒子在其父元素内居中的需求。而在布局中,居中又分为垂直居中与水平居中。水平居中的实现方法很简单,设置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:
除了以上说的这三种方法之外,还有很多种,只是在开发中,我觉得这三种用起来更简单快捷一些。