塊級元素中的行內(nèi)元素水平垂直居中
1.塊級元素中的行內(nèi)元素的水平居中
給包裹該行內(nèi)元素的塊級元素增加居中屬性
text-align:center;
2.塊級元素中的行內(nèi)元素的垂直居中
2.1內(nèi)容可變的 高度不要寫死忧换，使用padding上下填充即可骡湖。
padding:30px 0px;
2.2內(nèi)容不變的，一般是單行文字，多用于按鈕。使用高度和行高一致即可。
height:40px;
line-height:40px;
塊級元素在塊級元素中的水平垂直絕對居中
1.塊級元素(有固定寬度的)在頁面上的水平居中筒繁。塊級元素本身加屬性。
margin:0 auto巴元；
2.塊級元素(有固定寬度的)在頁面上的全屏毡咏。
2.1 適用場景 整屏全屏，一個整屏接一個整屏的逮刨。
html,body{
height:100%;
}
.test1 {
height:100%;
background:blue;
}
.test2 {
height:100%;
background:red;
}
2.2 適用場景 彈窗
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
3. 全屏垂直居中
3.1 寬高是固定死的
width:200px;
height:200px;
position:absolute
left:50%;
right:50%;
margin-left:-100px;(寬度一半)
margin-top:-100px;（高度一半）
3.2 寬高不知呕缭，由內(nèi)容撐開
position:absolute
left:50%;
right:50%;
transform:translate（-50%，-50%）;
4 塊級元素轉(zhuǎn)化為表格
display:table-cell;
vertical-align: middle;
未完待續(xù)......
