- flex弹性布局
/* 给父元素设置css样式 利用flex布局实现子元素居中 */
html{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.box{
width: 200px;
height: 200px;
background-color: #66cccc;
}
- 定位
.box{
width: 200px;
height: 200px;
background-color: #66cccc;
position: absolute; /* 绝对定位 */
top: 50%;
left:50%;
transform: translate(-50%, -50%); /*修改中心点位置 使主体位于中心*/
}
.box{
width: 200px;
height: 200px;
background-color: #66cccc;
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}