对父元素定位
- 1-父子元素进行定位,对子元素绝对定位,子元素margin:auto;top:0;left:0;bottom:0;right:0; (定位布局)
<div style="width:200px;height:200px;
border:solid blue;
position:relative;">
<div style="width:100px;height:100px;
background:red;;
margin:auto;
position:absolute;
top:0;left:0;bottom:0;right:0;">
</div>
</div>
- 2-对父元素定位,对子元素绝对定位,子元素left:50%,top:50%;margin-left:-子元素一半的宽度;margin-top: - 子元素一半的高度 (百分比布局)
<div style="width:200px;height:200px;
border:2px solid #000;
position:relative;">
<div style="width:100px;height:100px;
background-color: red;
margin:auto;
position:absolute;left:50%;top:50%;
margin-left:-50px;margin-top:-50px;">
</div>
</div>
设置父元素的dispaly方式
- 3-父元素 display:table-cell; vertical-align:middle; 子元素变成一个内联元素display:inline-block
<div style="width:200px;height:200px;
border:2px solid #000;
display:table-cell;
vertical-align:middle;
text-align: center;">
<div style="width:100px;height:100px;
background-color: red;
display:inline-block">
</div>
</div>
- 4-父元素 display:flex; justify-content:center align-items:center,子元素自动居中 (伸缩盒布局)
<div style="width:200px;height:200px;
border:2px solid #000;
display:flex;
justify-content:center;
align-items:center;">
<div style="width:100px;height:100px;
background-color: red;">
</div>
</div>
----------------------本文完----------------------