1 display：flex布局，其中 justify-content:center;分别为水平居中，align-items: center;竖直居中
<style>
html,body {
width: 100%;
height: 100%;
display: flex;
justify-content:center;
align-items: center;
}
.son {
width: 80%;
height: 50%;
background: pink;
}
</style>
<body>
<div class="son">
</div>
</body>
2 定位方法
<style>
html,body {
width: 100%;
height: 100%;
position: relative;
}
.son {
/* 写样式时尽量先写定位哦，有利于页面渲染 */
position: absolute;
top:50%;
left: 50%;
margin:-250px 0 0 -100px;
/* 这里宽高写成了px，要是百分比就直接差值除以二就可以啦，不用再多一步margin */
width: 200px;
height: 500px;
background: pink;
}
</style>
<body>
<div class="son">
</div>
</body>
扫一扫
5638
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
