面試必考問題之垂直居中：

1.margin：auto法

可以實現脫離文檔流居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			img{
				position:absolute;
				margin: auto;
				width: 20px;
				height: 20px;
				top:0;
				left: 0;
				right: 0;
				bottom: 0;
			}
			
			div{
				width: 700px;
				height: 400px;
				position: relative;
				border:1px solid red;
			}
		</style>
		<title></title>
	</head>
	<body>
	<div>
		<img src="Android.jpg" />
	</div>
	</body>
</html>

absolute生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。
relative生成相對定位的元素，相對於其正常位置進行定位。

2.margin負值法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
#container{
width: 500px;
height: 400px;
border: 2px solid black;
position: relative;
}
#inner{
width: 200px;
height: 100px;
background-color: yellowgreen;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px; /*width的一半*/
margin-top: -50px; /*height的一半*/
} 
</style>
<title></title>
	</head>
	<body>
	<div id="container">
		<div id="inner">
	</div>
	</body>
</html>

inner居中，則margin-left 和margin-top與width和height（inner）的取負值的二分之一。

3.table-cell（未脫離文檔流的）

設置父元素的display:table-cell,和vertical-align:middle，這樣子元素可以實現垂直居中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
div{
width: 100px;
height: 100px;
border: 3px solid #555;
display: table-cell;
vertical-align: middle;
text-align: center;
}
img{
width: 10px;
height: 10px;
vertical-align: middle;
}
		</style>
		<title></title>
	</head>
	<body>
	<div>
		<img src="Android.jpg" />
	</div>
	</body>
</html>

4.flex佈局

將父元素設置爲display：flex，並且設置align-items:center;justify-content:center;
用上面的html架子：

div{
width: 300px;
height: 200px;
border: 3px solid #546461;
display: flex;
align-items: center;
justify-content: center;
}
img{
width: 20px;
height: 20px;
border: 3px solid #458761;
padding: 1px;
}