1）使用absolute+transform
（1）原理、用法
原理：將水平居中時的absolute+transform和垂直居中時的absolute+transform相結合。詳見：水平居中的3）和垂直居中的2）。
見水平居中的3）和垂直居中的2）。
（2）**例項
demo
.parent {
position:relative;
.child {
position:absolute;
left:50%;
top:50%;
transform:tranplate(-50%,-50%);
（3）優缺點
優點:child元素不會對其他元素產生影響
缺點:相容性存在一定問題
2）使用inline-block+text-align+table-cell+vertical-align
（1）原理、用法
原理：使用inline-block+text-align水平居中，再用table-cell+vertical-align垂直居中，將二者結合起來。詳見：水平居中的1）和垂直居中的1）。
見水平居中的1）和垂直居中的1）。
（2）**例項
demo
.parent {
text-align:center;
display:table-cell;
vertical-align:middle;
.child {
display:inline-block;
（3）優缺點
優點:相容性較好
3）使用flex+justify-content+align-items
（1）原理、用法
原理：通過設定css3布局利器flex中的justify-content和align-items，從而達到水平垂直居中。詳見：水平居中的4）和垂直居中的3）。
見水平居中的4）和垂直居中的3）。
（2）**例項
demo
.parent {
display:flex;
justify-content:center;
align-items:center;
（3）優缺點
優點:只設定了parent
缺點:相容性存在一定問題
CSS水平居中布局解決方案
html結構如下 class parent class child demodiv div 這裡的父元素和子元素的寬度都未知 child parent 優點 相容性很好，可以相容到ie6 zoom 缺點 text align會繼承，所以子元素要重設text align left child 設定di...
CSS之水平垂直居中的各種實現方法
這水平垂直居中，可謂是面試筆試，屢試不爽 所以今兒總結了一下，方便查閱和學習。1 知道div的寬高，採用position定位實現class outer1 class inner1 div div outer1 inner1 2 元素未知寬度，採用position和transform結合使用class...
CSS的水平布局
css的水平布局 1 元素水平方向的布局 元素在其父元素水平方向的位置，由以下幾個屬性共同決定 margin left border left padding left width padding right border right margin right 乙個元素在其父元素中，水平布局必須滿足...