css水平垂直居中
1、绝对定位+margin：auto
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>水平垂直居中</title>
</head>
<style type="text/css">
.wrp {
background-color: #b9b9b9;
width: 500px;
height: 500px;
}
.box {
color: white;
background-color: #3e8e41;
width: 200px;
height: 120px;
overflow: auto;
}
.wrp1 { position: relative; }
.box1 {
margin: auto;
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
}
</style>
<body>
<div class="wrp wrp1">
<div class="box box1">
<h3>我是一些文字，我要垂直居中。我是一些文字，我要垂直居中</h3>
<h3>我是一些文字，我要垂直居中。我是一些文字，我要垂直居中</h3>
<h3>我是一些文字，我要垂直居中。我是一些文字，我要垂直居中</h3>
</div>
</div>
</body>
</html>实现原理：利用css定位规则，设置左右、上下方向定位为0，margin为auto，让css根据定位计算margin值，用hack的方式实现居中。居中块（绿色）的尺寸需要可控,因为css计算margin时也需要参考尺寸值，由于四周为0，所以自动计算的尺寸是与父容器一样的。无论是设置width、height或者是 max-height、max-width，都是让尺寸不会扩大到与父级一样。
2、绝对定位+margin反向偏移
.wrp1 { position: relative; }
.box1 {
position: absolute;
left:50%;top:50%;
margin-left:-100px;
margin-top:-60px;
}实现原理：由于top、left偏移了父对象的50%高度宽度，所以需要利用margin反向偏移居中块的50%宽高。而margin中不能使用百分比，因为百分比是针对父对象的，所以需要手动计算定值指定margin值。这个方案需要固定尺寸值，以此来计算margin反向偏向值，所以方案2比方案1稍差！
3、绝对定位+transform：translate（-50%，-50%）
.wrp1 { position: relative; }
.box1 {
position: absolute;
top: 50%; left: 50%;
margin: auto;
transform: translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%); /* Safari and Chrome */
-ms-transform:translate(-50%,-50%); /* IE 9 */
}4、display：table+ vertical-align：middle
.wrp1 { display: table;}
.mid {
display: table-cell;
vertical-align: middle;
}
.box1 {
margin: auto;
}实现原理：方案4是实现效果比较好的，居中块的尺寸可以做包裹性，缺点是增加了一层table-cell层来实现垂直居中。方案4的居中块可以设置 max-height、max-width，而且居中块是可以具有垂直方向的包裹性的。水平方向由于是在table-cell里面的，所以会直接显示max-width，也就是宽度趋大。
5、display: inline-block
.wrp1 {
text-align: center;
border: 2px solid red;
}
.box1 {
display: inline-block;
vertical-align: middle;
}
.wrp1:after {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
border: 2px solid yellow;
}
实现原理：原理：利用inline-block的vertical-align: middle去对齐after伪元素，after伪元素的高度与父对象一样，就实现了高度方向的对齐。方案5实现效果更加好，居中块的尺寸可以做包裹性、自适应内容，兼容性也相当好。缺点是水平居中需要考虑inline-block间隔中的留白（代码换行符遗留问题。）。方案4的居中块可以设置 max-height、max-width，而且居中块是可以具有水平垂直两个方向的自适应。
6、flexbox布局
.wrap {
display:flex;
display：-webkit-flex;//Safari
justify-content:center;//items在主轴上的对齐方式
-webkit-align-items:center;
align-items:center;//items在交叉轴上的对齐方式
-webkit-align-items:center;
}
上一篇： 生成随机数
下一篇： C/C++中代码段运行时间/程序运行时间