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

效果如图