css居中方法记录

记录一些用css实现各种居中的方法

css实现div盒子的水平垂直居中

html:

<div class="father-box"></div>
<div class="son-box"></div>

css:

.father-box {
	height: 148px;
	background-color: #fff;
	position: relative;
} 

.son-box {
	position: absolute;
	line-height: 120px;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 1220px;
	height: 120px; 
	background-color: #87CEEB;
}

css实现图片和文字水平居中对齐

html:

<div class="index-nav-left">
	<img src="../Maguwo Host/img/nav-logo.jpg">
	<span>MaguwoHost</span>	
</div>

css:

.index-nav-left {
	font-size: 20px;
	background-color: #0EB4DD;
}

.index-nav-left img {
	width: 30px;
	height: 36px;
	vertical-align:middle;
}