代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style type="text/css">
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.box {
width: 521px;
height: 521px;
background-color: aqua;
position: relative;
}
.elem1 {
width: 100px;
height: 100px;
background-color: red;
margin: 10px auto; /* 先上下在左右 */
}
.elem2 {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
transform: translate(-50%, -50%); /* 第一个参数表示x轴 */
top: 50%; /* 以父元素为参照 */
left: 50%;
}
</style>
</head>
<body>
<div class="box">
<div class="elem1"></div>
<div class="elem2"></div>
</div>
</body>
</html>
效果:
css中:
body选择器对应了图中①号居中
.elem1选择器对应了图中②号居中
.elem2选择器对应了图中③号居中
另外的知识点:
margin: 10px auto; 中参数为 先上下在左右
transform: translate(-50%, -50%); 中第一个参数表示x轴,参照物为自己
top: 50%; 中以父元素为参照
20210806补充
代码:
#b{
margin: auto;
left: 0;
top: 0;
bottom: 0;
right: 0;
position: absolute;
width: 500px;
height: 500px;
background-color: rebeccapurple ;
}
效果:
left和right是为了水平居中,也可以不为零。
参考文章:
position:absolute和margin:auto 连用实现元素水平垂直居中
css中 top, right, bottom, left设置为0有什么用?它和width:100%和height:100%有什么区别?
(史上最全)div居中的几种方法
如何实现元素的水平垂直居中
CSS实现元素居中N种方法 ——比较全,附上 demo