用CSS实现居中的几种方式

用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>

<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>