元素div自動(dòng)居中放置有很多方法仁期，在這里歸納一下眼五。
一、水平居中
1. 內(nèi)聯(lián)元素水平居中(可用于內(nèi)聯(lián)元素包括inline, inline-block, inline-table, inline-flex）
text-align: center;
2. 塊級(jí)元素水平居中
margin: 0 auto; width: 800px;
3. flex居中
display: flex; justify-content: center;
二、垂直居中
1. 單行居中
height: 100px; line-height: 100px;
2. 多行居中
display: flex; flex-direction: column; justify-content: center;
或vertical-align: middle; display: inline-block;
3. 塊級(jí)元素居中
position: absolute; top: 50%; transform: translateY(-50%);
三另凌、水平垂直都居中
1. transform
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
2. flex
display: flex; justify-content: center; align-items: center;
3. table
display: table; text-align: center; vertial-align: middle;
