两个盒子
<div class="box">
<div class="ppp">6666</div>
</div>
第一种居中方式:不知道居中元素的宽高
.box{
position: relative;
height: 100%;
width: 100%;
background-color: aqua;
}
.ppp{
position: absolute;
left: 50%;
top: 50%;
margin: auto;
background-color: red;
transform: translate(-50%);
}
第二种:position:absolute定位居中
.box{
height: 100%;
width: 100%;
background-color: aqua;
}
.ppp{
position: absolute;
width: 50px;
height: 50px;
left: 0;
right: 0;
top: 0;
bottom:0;
margin: auto;
}
第三种:text-aligin ;vertical-aligin
.box{
text-align: center;
width: 100%;
height: 600px;
background-color: aqua;
line-height: 600px;
}
.ppp{
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: magenta;
display: inline-block;
vertical-align: middle;
}
第四种:CSS3,display:fiex
.box{
display: flex;
background-color: aqua;
justify-content:center;
align-items: center;
width:100%;
height: 100%;
}
.ppp{
background-color: magenta;
}