div垂直居中布局
Posted datouxiaoming
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了div垂直居中布局相关的知识，希望对你有一定的参考价值。
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;
}
以上是关于div垂直居中布局的主要内容，如果未能解决你的问题，请参考以下文章