页面结构都是:
<div class="parent" style="background-color:red;width: 400px;height: 400px;"> <div class="child" style="background-color:blue;width: 200px;height: 200px;"></div> </div>
一、水平居中
1.设置父元素和子元素,inline-block+text-align:ie6↑
.parent { text-align: center; } .child { display: inline-block; }
2.设置子元素,table+margin: ie8↑
.child { display:table; margin:0 auto; }
3.设置父元素和子元素,absolute+transform:ie10↑
.parent { position:relative; } .child { position:absolute; left:50%; transform:translateX(-50%); }
4.设置父元素和子元素,flex+margin:ie9↑
.parent { display:flex; } .child { margin:0 auto; }
5.设置父元素,flex+justify-content:ie9↑
.parent { display:flex; justify-content:center; }
二、垂直居中
1.设置父元素,table-cell+vertical-align:ie8↑
.parent { display:table-cell; vertical-align:middle; }
2.设置父元素和子元素,absolute+transform:ie10↑
.parent { position:relative; } .child { position:absolute; top:50%; transform:translateY(-50%); }
3.设置父元素,flex+align-items:ie9↑
.parent { display:flex; align-items:center; }
三、水平+垂直
1.设置父元素和子元素,absolute+transform:ie10↑
.parent { position:relative; } .child { position:absolute; left:50%; top:50%; transform:tranplate(-50%,-50%); }
2.设置父元素和子元素,inline-block+text-align+table-cell+vertical-align:ie8↑
.parent { text-align:center; display:table-cell; vertical-align:middle; } .child { display:inline-block; }
3.设置父元素,flex+justify-content+align-items:ie9↑
.parent { display: flex; justify-content: center; align-items: center; }
原文地址:https://www.cnblogs.com/zgdawdl/p/10022962.html
时间: 2024-11-13 03:02:22