让div⾥⾯的两个元素竖直排列，并相对于其⽔平垂直居中
⽅法1
两个元素再包装⼀个元素，外部的div设为table，内部的div设为table-cell，vertical-align:middle，实现垂直居中;text-align:center，内部的元素⽔平居中
html
<div class="outer">
<div class="inner">
<p>this is a paragraph</p>
<img src="5.jpg">
</div>
</div>
css
.outer {
width: 300px;
height: 300px;
border: 1px solid #f00;
display: table;
}
.inner {
display: table-cell;
vertical-align: middle;
border: 1px solid #777;
text-align: center;
div中的div居中
}
效果如图
⽅法2
也是再包装⼀个元素，外部div设为相对定位，内部div设为inline-block，将两个元素包围起来，还要设为绝对定位，left、top给50%，然后⽤translate也给-50%
.outer {
width: 300px;
height: 300px;
border: 1px solid #f00;
position: relative;
}
.inner {
position: absolute;
display: inline-block;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px solid #777;
text-align: center; }
效果如图

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。