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

效果如圖