一、块级元素相对于body水平垂直居中
1.最简单的,body设置display:flex,div设置margin:auto
html,body {
width: 100%;
height: 100%;
}
body{
display: flex;
}
.test{
width: 500px;
height: 500px;
background-color: antiquewhite;
margin: auto;
}
2.body不做属性设置,只修改div
.test {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 500px;
background-color: aqua;
}
二、在一基础上块级元素子盒子相对于父盒子水平垂直居中
1.
html,body {
width: 100%;
height: 100%;
}
body{
display: flex;
}
.test{
position: relative;
width: 500px;
height: 500px;
background-color: antiquewhite;
margin: auto;
}
table {
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
}
效果如图:
2.
.test {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 500px;
background-color: aqua;
//让子元素水平垂直居中
display: flex;
justify-content: center; /* 默认主轴为x轴,实现水平居中 */
align-items: center; /* 实现垂直居中 */
}
效果如图: