标签：position splay center round str nbsp back 水平居中 cell
页面结构都是:
<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;
}
标签：position splay center round str nbsp back 水平居中 cell
原文地址：https://www.cnblogs.com/zgdawdl/p/10022962.html
