第一种:使用定位(已知自身元素宽高)
利用定位,分别移动至父元素的顶部和左侧分别50% 的距离,然后利用calc()自动计算分别反方向平移自身宽高的一半
.div1{
width: 400px;
height:400px;
background-color: red;
position: absolute;
top: calc(50% - 200px);
left: calc(50% - 200px);
}
第二种:使用定位(利用transform)
方便后期维护,后期需要改变div大小的时候,只需要更改宽高参数,利用定位,分别移动至父元素的顶部和左侧分别50% 的距离,然后再利用transform的translate属性分别反方向平移自身宽高的50%
.div1{
width: 400px;
height:400px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
第三种(利用flex,在父元素中使用)
开启弹性布局,规定父元素的子元素居中对齐
.div2{
width: 700px;
height: 700px;
background-color: green;
display: flex;
align-items: center;
justify-content: center;
}
第四种(未知父元素宽高)
/*子元素*/
.div1{
width: 300px;
height:300px;
background-color: red;
margin:auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
第五种(利用css3的新增属性table-cell, vertical-align:middle;)
/*父元素*/
.div2{
width: 700px;
height: 700px;
background-color: green;
display: table-cell;
vertical-align: middle;
}
/*子元素*/
.div1{
width: 300px;
height:300px;
background-color: red;
margin: auto;
}