CSS水平垂直居中总结
web开发网页布局中常常会碰到各种居中，由于浏览器渲染方式的不同，因此存在很多不同的场景，本文将个人平时遇到的一些场景一一列举，以备不时之需。示例代码地址：runjs
1.垂直居中
前提：假定父元素是盒子模型且高度已经设定。
场景一：子元素是行内元素，高度由其内容撑开
这种情况下，需要通过设定父元素的line-height为其高度来使子元素垂直居中
html代码：
<div class="wrap line-height"> <span class="span">11111</span></div>
css代码：
.wrap{ width:200px ; height: 200px; border: 2px solid #ccc; box-sizing: border-box; } .span{ background: red; } .line-height{ line-height: 200px; }
效果:
场景二：子元素是块级元素且高度已经设定。
方法1：
计算子元素的margin-top货margin-bottom,计算方法为（父元素高度-子元素高度）/2
html代码：
<div class="wrap "> <div class="div1 margin">111111</div>
css代码：
.wrap{ width:200px ; height: 200px; border: 2px solid #ccc; box-sizing: border-box; } .div1{ width:100px ; height: 100px; box-sizing: border-box; background: darkblue; } .margin{ margin-top: 50px; }
效果图：
方法2：计算父元素的padding-top或padding-bottom，计算方法为（父元素高度-子元素高度）/2
html代码：
<div class="wrap padding"> <div class="div1 ">111111</div>
css代码：
.wrap{ width:200px ; height: 200px; border: 2px solid #ccc; box-sizing: border-box; } .div1{ width:100px ; height: 100px; box-sizing: border-box; background: blue; } .padding{ padding-top: 50px; }
效果图同上。
方法3：利用绝对定位，让子元素相对于父元素绝对定位
html代码：
<div class="wrap relative"> <div class="div1 absolute">111111</div>
css代码：
.relative{ position: relative; } .absolute{ position: absolute; top:50%; margin-top: -50px; } .div1{ width:100px ; height: 100px; box-sizing: border-box; background: blue; } .wrap{ width:200px ; height: 200px; border: 2px solid #ccc; box-sizing: border-box; }
效果图同上
方法4：使用flexbox
flex-direction：设置或检索伸缩盒对象的子元素在父容器中的位置。
取值：row：默认值，横向从左至右排列（左对齐）。
row-reverse：相对于row，反转横向排列。
column：纵向排列。
column-reverse：相对于column，反转纵向排列，最后一项在最上面。
flex生效需定义其父元素display为flex或者inline-flex。
justify-content：设置货检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
html代码：
<div class="wrap flex"> <div class="div1 ">111111</div> </div>
css代码：
.flex{ display: flex; flex-direction: column; justify-content: center; }
以上css代码请自行加上-moz-，-webkit-。
场景三：子元素是块级元素且高度没有设定。
方法一：给父元素设定display:table-cell;vertical-align:middle。
方法二：使用flexbox，同场景二方法4。
2.水平居中
前提：父元素必须是块级盒子容器，父元素宽度已经设定好。
场景一：子元素是块级元素且宽度没有设定。
该情况下，实际上不存在水平居中一说，因为子元素会充满整个父级元素的宽度。
场景二：子元素是行内元素，子元素宽度由其内容撑开。
该情况下，给父元素设定text-align:center即可。
场景三：子元素是块级元素，且宽度已经设定。
方法一：
给子元素加上margin:0 auto;
html代码：
<div class="wrap"> <div class="child auto"> non-child </div> </div>
css代码：
.child{ width: 100px; height: 100px; background: green; box-sizing: border-box; } .auto{ margin:0 auto; } .wrap{ width:200px ; height: 200px; border: 2px solid #ccc; box-sizing: border-box; }
效果图：
方法二：通过计算父元素的padding-left或padding-right，计算方法（父元素宽度-子元素宽度）/2
html代码：
<div class="wrap padding"> <div class="child "> non-child </div>
css代码：
.padding{ padding-left: 50px; }
方法三：通过计算子元素的margin-left或margin-rigth，计算方法同方法三。
方法四：通过子元素相对父元素绝对定位。
html代码：
<div class="relative1"> <div class="child absolute1"> non-child </div> </div>
css代码：
.relative1{ width: 300px; height: 200px; border: 2px solid #ccc; box-sizing: border-box; position: relative; } .absolute1{ position: absolute; left:50%; margin-left:-50px; }
效果图同上，这里还要设定子元素margin-left为-50px（子元素宽度/2）是需要消除父元素50%造成的偏移。
方法五：使用flexbox
html代码：
<div class="flex1"> <div class="child "> non-child </div> </div>
css代码：
.flex1{ width: 300px; height: 200px; border: 2px solid #ccc; box-sizing: border-box; display:flex; flex-direction: row; justify-content:center; }
效果同上。
