代碼： 方案一： div絕對定位水平垂直居中【margin:auto實現絕對定位元素的居中】， 相容性：,IE7及之前版本不支持 .father{ width：400px; height:400px; background: red; position:relative; /* 或者position ...
代碼：
<div class="father">
<div class="son">
</div>
</div>
方案一：
div絕對定位水平垂直居中【margin:auto實現絕對定位元素的居中】，
相容性：,IE7及之前版本不支持
.father{ width：400px; height:400px; background: red;position:relative; /* 或者position:absolute;*/ }
.son{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
優點：
- 簡單
缺點：
- IE(IE8 beta)中無效
- 無足夠空間時，
.son被截斷，但是不會有滾動條出現
方案二：
div絕對定位水平垂直居中【margin 負間距】 這或許是當前最流行的使用方法。
.father{ width：400px; height:400px; background: red; position:relative; /* 或者position:absolute;*/ } .son{ width:200px;
height: 200px;
background:green;
position: absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}
優點：
- 適用於所有瀏覽器
- 不需要嵌套標簽
缺點：
- 沒有足夠空間時，.son會消失(類似
div在body內，當用戶縮小瀏覽器視窗，滾動條不出現的情況)
方案三：
div絕對定位水平垂直居中【Transforms 變形】
相容性：IE8不支持；
.father{ width：400px; height:400px; background: red; position:relative; /* 或者position:absolute;*/ }
.son{ width: 200px; height: 200px; background: green; position:absolute; left:50%; /* 定位父級的50% */ top:50%; transform: translate(-50%,-50%); /*自己的50% */ }
不定寬高的的水平垂直居中
方案四：
css不定寬高水平垂直居中，CSS3屬性
.father{
width：？px;
height:？px;
background: red;
display:flex;
justify-content:center;
align-items:center;
/* aa只要三句話就可以實現不定寬高水平垂直居中。 */
}
.son{
background: green;
width: ？px;
height: ？px;
}
方案五：
將父盒子設置為table-cell元素，可以使用text-align:center和vertical-align:middle實現水平、垂直居中。比較完美的解決方案是利用三層結構模擬父子結構
.father{
width：？px;
height:？px;
background: red;
display: table-cell;
vertical-align: middle;
}
.son{
background: green;
width: ？px;
height: ？px;
margin: auto;
}
或者
.father{
width：？px;
height:？px;
background: red;
display: table-cell;
vertical-align: middle;
text-align:center;
}
.son{
background: green;
width: ？px;
height: ？px;
display:inline-block;
}
優點：
.son 可以動態改變高度(不需在 CSS 中定義)，.son 不會被截斷
缺點：
Internet Explorer(甚至 IE8 beta)中無效，許多嵌套標簽
方案六：
對子盒子實現絕對定位，利用calc計算位置
.box {
position: relative;
}
.div {
width: 200px;
height: 200px;
background: green;
position: absolute;
left: -webkit-calc((400px - 200px)/2);
top: -webkit-calc((400px - 200px)/2);
left: -moz-calc((400px - 200px)/2);
top: -moz-calc((400px - 200px)/2);
left: calc((400px - 200px)/2);
top: calc((400px - 200px)/2);
}
