用CSS实现居中的几种方式
HTML
<div class="box">
<div class="content"></div>
</div>
- 绝对定位居中(知道宽高)
<style>
.box{
position:relative;
width:500px;
height:500px;
}
.content{
position:absolute;
left:50%;
right:50%;
width:100px;
height:100px;
margin-left:-50px;
margin-top:-50px;
}
</style> - flex布局实现
<style>
.box{
display:flex;
justify-content: center;
align-items: center;
width:500px;
height:500px;
background-color: red;
}
.content{
/*长度随意*/
width:100px;
/*宽度随意*/
height:100px;
background-color: #fff;
}
</style>