实现子元素相对于父元素左右居中

1. 显示的设定子元素的宽度，然后将资源的margin值设定为：margin:0 auto;

html:

<div class="parent">
　　<div class="child"></div>
</div>

css:

.parent {
	width:100px;
	height:100px;
	background:red;
　　　　// 这样将使得 parent 的子元素相对于 parent 左右居中，
　　　　// text-align: 属性将居中元素体内的行内元素(text-align:主要是设置元素的文本为左右居中方式，当把元素体内的其他元素显示为行内元素的时候将使得元素相对于父级元素左右居中
　　　　 text-aligin:center;
}
.child {
	/*如果设定为绝对定位，会不起效
	* 原因是设定为觉得定位后，元素的位置会相对于
	 *向上回溯第一个定位为：absolute/relative
	 *的父级元素定位
	*/
	/*position: absolute;*/
	margin:0 auto;
	width:50px;
	height:100px;
	background:green;
}

2. 使用 display:inline-block;vertilce-aligin:middle 居中元素;

html 结构如下：

<div class="container parent">
	<div class="child child1">1</div>
	<div class="child child2">2</div>
	<div class="child child3">3</div>
	<div class="child child4">4</div>
	<div class="child child5">5</div>
</div>

css 代码如下：

　　

.parent {
		height:400px;
		background:#000;
		text-align:center;
	}
　　　　 // 设置 after 伪元素让元素高度为 100%；居中方式 verticle-align:middle;这样能让行内元素相对于父级元素上下居中
	.parent:after {
		display:inline-block;
		vertical-align:middle;
		content:'.';
		height:100%;
	}
　　　　// child 元素将相对于 after 伪元素撑开的范围上下居中
	.child {
		display:inline-block;
		position:relative;
		width:15%;
		line-height:100%;
		vertical-align:middle;
		border:1px solid #e0e;
		text-align:center;
		font-size:100px;
		color:#fff;
	}
	.child1 {
		height:100px;
		background:#234;
	}
	.child2 {
		height:200px;
		background:#456;
	}
	.child3 {
		height:300px;
		background:#901;
	}
	.child4 {
		height:320px;
		background:#128;
	}
	.child5 {
		height:250px;
		background:#178;
	}