1、纪录下几种盒子垂直居中的方式：
1.0、margin固定不动宽高垂直居中；
2.0、负margin垂直居中；
3.0、肯定精准定位垂直居中；
4.0、table-cell垂直居中；
5.0、flex垂直居中；
6.0、transform垂直居中；
7.0、不确定性宽高垂直居中(肯定精准定位百分数)；
8.0、button垂直居中。
2、编码演试(html应用同1个Demo)：
html Demo：
<body>
<div id="container">
<div id="box"></div>
</div>
</body>
1.0、margin固定不动宽高垂直居中(演试)
这类精准定位方式纯碎是靠宽高和margin拼出来的，并不是很灵便。
CSS：
#container {
width: 600px;
height: 500px;
border: 1px solid #000;
margin: auto;
}
#box {
width: 200px;
height: 200px;
margin: 150px 200px;
background-color: #0ff;
}
2.0、负margin垂直居中(演试)
运用负的margin来开展垂直居中，必须了解固定不动宽高，限定较为大。
CSS:
#container {
position: relative;
width: 600px;
height: 500px;
border: 1px solid #000;
margin: auto;
}
#box {
position: absolute;
width: 200px;
height: 200px;
left: 50%;
top: 50%;
margin: ⑴00px ⑴00px;
background-color: #0ff;
}
3.0、肯定精准定位垂直居中(演试)
运用肯定精准定位垂直居中，十分常见的1种方式。
CSS:
#container {
position: relative;
width: 600px;
height: 500px;
border: 1px solid #000;
margin: auto;
}
#box {
position: absolute;
width: 200px;
height: 200px;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: #0ff;
}
4.0、table-cell垂直居中(演试)
运用table-cell来操纵竖直垂直居中。
CSS:
#container {
display: table-cell;
width: 600px;
height: 500px;
vertical-align: middle;
border: 1px solid #000;
}
#box {
width: 200px;
height: 200px;
margin: 0 auto;
background-color: #0ff;
}
5.0、flex垂直居中(演试)
CSS3中引进的新合理布局方法，较为功能强大。缺陷：IE9和IE91下兼容问题。
CSS:
#container {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
width: 600px;
height: 500px;
border: 1px solid #000;
margin: auto;
}
#box {
width: 200px;
height: 200px;
background-color: #0ff;
}
6.0、transform垂直居中(演试)
这类方式灵便应用CSS中transform特性，较为奇特。缺陷是IE9下兼容问题。
CSS:
#container {
position: relative;
width: 600px;
height: 600px;
border: 1px solid #000;
margin: auto;
}
#box {
position: relative;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
transform: translate(⑸0%, ⑸0%);
-webkit-transform: translate(⑸0%, ⑸0%);
-ms-transform: translate(⑸0%, ⑸0%);
-moz-transform: translate(⑸0%, ⑸0%);
background-color: #0ff;
}
7.0、不确定性宽高垂直居中(肯定精准定位百分数)(演试)
这类不确定性宽高的垂直居中，较为灵便。只必须确保left和right的百分数1样便可以完成水平垂直居中，确保top和bottom的百分数1样便可以完成竖直垂直居中。
CSS:
#container {
position: relative;
width: 600px;
height: 500px;
border: 1px solid #000;
margin: auto;
}
#box {
position: absolute;
left: 30%;
right: 30%;
top: 25%;
bottom: 25%;
background-color: #0ff;
}
8.0、button垂直居中(演试)
运用button做外器皿，里面的块元素会全自动竖直垂直居中，只必须操纵1下水平垂直居中便可以做到实际效果。
HTML：
<button>
<div></div>
</button>
CSS：
button {
width: 600px;
height: 500px;
border: 1px solid #000;
}
div {
width: 200px;
height: 200px;
margin: 0 auto;
background-color: #0ff;
}
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。
原文连接：http://www.cnblogs.com/likar/archive/2016/06/16/5590948.html