让div里面的两个元素竖直排列，并相对于其水平垂直居中

方法1

两个元素再包装一个元素，外部的div设为table，内部的div设为table-cell，vertical-align:middle，实现垂直居中;text-align:center，内部的元素水平居中

html

this is a paragraph

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

效果如图