方法一:1.左右居中(绝对定位)
先给父元素开启相对定位,再给子元素开启绝对定位,然后将子元素向左移动自己的50%,使子元素的中点与父元素的起点对齐,然后再将子元素向右移动父元素的50%,这样子元素和父元素的中心点就刚好重合了
<style>
.box1{
width: 1000px;
height: 50px;
background-color: pink;
position: relative;
}
.box2{
width: 500px;
height: 40px;
background-color: yellow;
position: absolute;
transform: translate(-50%);
left: 50%;
}
</style>
<body>
<div>
<div class="box1"><div class="box2"></div></div>
</div>
</body>
再设置 transform: translate(0,-50%) top:50%即可以实现上下居中,合起来即可实现中心居中
.box1{
width: 1000px;
height: 400px;
background-color: pink;
position: relative;
}
.box2{
width: 500px;
height: 200px;
background-color: yellow;
position: absolute;
transform: translate(-50%,-50%);
left: 50%;
top:50%
}
</style>
<body>
<div>
<div class="box1"><div class="box2"></div></div>
</div>
方法二:如果只需要实现上下居中则:top:0,bottom:0,margin:auto 0
左右居中:left:0,right:0,margin:0 auto
中心居中:top:0,bottom:0,left:0,right:0,margin:auto
.box1{
width: 1000px;
height: 400px;
background-color: pink;
position: relative;
}
.box2{
width: 500px;
height: 200px;
background-color: yellow;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
<body>
<div>
<div class="box1"><div class="box2"></div></div>
</div>