html使div内部元素水平排列_让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;

}

效果如图