盒子垂直水平居中
定位
<style>
.big {
position: relative;
width: 400px;
height: 400px;
background-color: skyblue;
}
.small {
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<body>
<!--
子元素绝对定位,父元素相对定位
top和left设置为 50%
再利用 margin 向上、向左移动盒子的一半
-->
<div class="big">
<div class="small"></div>
</div>
</body>
<style>
.big {
position: relative;
width: 400px;
height: 400px;
background-color: skyblue;
}
.small {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<body>
<!--
子元素绝对定位,父元素相对定位
top和left设置为 50%
再利用 transform 向上、向左移动盒子的一半
(注:transform不会脱离文档流)
-->
<div class="big">
<div class="small"></div>
</div>
</body>
flex
<style>
.big {
display: flex;
justify-content: center;
align-items: center;
width: 400px;
height: 400px;
background-color: skyblue;
}
.small {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<body>
<div class="big">
<div class="small"></div>
</div>
</body>
定位+margin
<head>
<style>
.big {
position: relative;
width: 400px;
height: 400px;
background-color: skyblue;
}
.small {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 200px;
height: 200px;
background: pink;
}
</style>
</head>
<body>
<!--
子元素绝对定位,父元素相对定位
子元素所有定位值 设置为 0
使用 margin: auto; 自适应
-->
<div class="big">
<div class="small"></div>
</div>
</body>