垂直居中总结
- 行高法（line-height）：
如果要垂直居中的只有一行inline元素，只要让其行高（line-height）和容器的高度(height)相同即可，比如：
① 它的父盒子是block.
# HTML:
<div> CSS权威指南 </div>
<p> Python编程：从入门到实践 </p>
# CSS:
div{border:3px solid red;height:100px;line-height:100px;}
p{border:3px solid blue;height:100px;line-height:100px;}

② 如果是inline元素，它没有高度属性可以调整，只有水平居中，只能临时把它{display:inline-block},例如：
<span class="span">
觀自在菩薩，行深般若波羅蜜多時，照見五蘊皆空，度一切苦厄。
</span>
# CSS:
span{height:100px;line-height:100px;outline:3px solid red;display: inline-block;}

PS.line-height方法只适用于非换行元素(即一行文字)，若超过一行/换行，则失效（垂直居中的只有第一行）。
- 内边距（padding）法:原理就是利用padding将内容垂直居中。
# HTML:
<div> div.border.padding </div>
<p> p.outline.padding </p>
# CSS:
div{border:3px solid red;padding:40px 0;}
p{outline:3px solid green;padding:40px 0;}

- 模拟表格法:将容器设置为display:table，然后将子元素也就是要垂直居中显示的元素设置为display:table-cell，然后加上vertical-align:middle来实现。
实质上起作用的是table-cell,table并无效果。利用table-cell可以定义内部元素水平/垂直对齐的性质以达到目的。
# HTML:
<div class="container">
<div class="div1">测试垂直居中效果测试垂直居中效果</div>
</div>
# CSS:
.container {
width: 300px;
height: 300px;
border: 3px solid;
text-align: center;
vertical-align: middle;
display: table-cell; /* 将父盒子设置为table-cell，相当于table的td。*/
}
.div1 {
width: 100px;
height: 100px;
border: 3px solid red;
background-color: yellow;
display: inline-block; /* 此句对垂直居中无影响，是为了将目标div水平居中而设置。*/
}

table-cell内部元素是一个整体，居中也是整体居中。
#CSS：
.container {
width: 300px;
height: 500px;
border: 5px solid red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.div1 {
width: 100px;
height: 100px;
border: 5px solid blue;
display: inline-block;
}
.p1 {
outline: 5px solid green
}
# HTML：
<div class="container">
<div class="div1"> div </div>
<p class="p1"> This is a paragraph </p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1278361/profile/profile-80.jpg?100000" alt="">
</div>

PS.table-cell还有很多有趣的用法，待述。
- transform法:很简单，只需给要居中的目标元素写入如下样式。
position:relative; #若使用absolute须给父框+ position:relative;
left:50%;
top:50%;
transform:translate(-50%,-50%);
/* 缺点：可能干扰其他 transform 效果。*/
- 绝对定位与负边距法：利用绝对定位，将元素的top和left属性都设为50%，再利用margin边距，将元素回拉它本身高宽的一半，实现垂直居中。
# CSS:
.container {
border: 3px solid red;
width: 300px;
height: 300px;
position: relative;
}
.div1 {
border: 3px solid green;
width: 100px;
height: 100px;
position: absolute;
top: 50%; /* 父框height*50% */
left: 50%; /* 父框width*50% */
margin: -50px 0 0 -50px;
}
# HTML:
<div class="container">
<div class="div1">div1</div>
</div>
PS. 其实'绝对定位与负边距法'与'transform法'原理是一样的，只是使用的属性不同。
- 伪元素法：
.container::after{
content:'';
height:100%;
}
.container::after, .son{
display:inline-block;
vertical-align:middle;
}
优点：适合所有浏览器。
- Flexbox法：
# HTML:
<div class="container">
<div class="div1">codepen.io</div>
</div>
# CSS:
.container {
width: 300px;
height: 300px;
border: 3px solid red;
margin: 20px auto;
padding: 10px;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
}
.div1 {
width: 100px;
height: 100px;
border: 3px solid green;
line-height: 100px;
text-align: center;
}

PS. Flex是CSS3中一大类新语法，需要另附章节。
[附录.CSS3中新加入Flex方法：]
- Flex (2012版)
.container {
display: flex;
align-items: center;
}
/* 父盒子使用此设置，子元素无须任何属性即可实现垂直居中 */
优点：内容块的宽高任意。
缺点：IE8/IE9不支持/需浏览器厂商前缀。
- flex （2009版.）
.container {
display: box;
box-orient: vertical;
box-pack: center;
}
缺点：不支持IE
