html：
<body>
<div class="outer-div">
<div class="inner-div">
ddddddd
</div>
</div>
</body>
css：
如下分不同情况的四种实现方式：
1.inner-div宽高不知,flex布局
.outer-div {
display: flex;
height: 500px;
width: 100%;
}
.inner-div {
margin: auto;
background-color: aquamarine;
}
2.inner-div宽高不知或知，flex：
.outer-div {
display: flex;
height: 500px;
width: 100%;
justify-content: center;
align-items: center;
}
.inner-div {
background-color: aquamarine;
}
3.宽高不知，绝对定位（采用transform）：
.outer-div {
height: 500px;
width: 100%;
position: relative;
background-color: bisque;
}
.inner-div {
position: absolute;
top:50%;
left:50%;
transform:translateY(-50%) translateX(-50%);
background-color: aquamarine;
}
4.宽高已知，绝对定位：
.outer-div {
height: 500px;
width: 100%;
position: relative;
background-color: bisque;
}
.inner-div {
position: absolute;
top:calc( 50% - 25px);
left:calc( 50% - 50px);
width:100px;
height:50px;
background-color: aquamarine;
}
1277
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
