这里主要写了三种方法
一种是给父元素设置position:relative;
子元素设置absolute,然后上下左右都为0,margin:auto,这便成了脱离文档的垂直居中。
<div class="main">
<div class="container"></div>
.main{
width: 400px;
height: 400px;
position: relative;
border: 1px solid #465468;
}
.container{
width: 50px;
height: 50px;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: red;
}
用定位的方式,子元素left 和 top的50%,再利用margin减去子元素的宽高一半的值
<div class="main">
<div class="container"></div>
.main{
width: 400px;
height: 400px;
position: relative;
border: 1px solid #465468;
}
.container{
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
background-color: red;
}
第三种是利用flex来做,这种的话,设置父元素为flex,同时设置align-itmes和justify-content都为center就可以
<div class="main">
<div class="container"></div>
.main{
width: 400px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #465468;
}
.container{
width: 50px;
height: 50px;
background-color: red;
}