让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;
}

效果如图

方法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;
}

效果如图

转载于:https://www.cnblogs.com/u14e/p/5317501.html