CSS——水平/垂直居中

标签：

1.水平居中：

>文本、图片等行内元素——给父元素设置 text-align: center

>定宽块状元素——左右margin设置为auto

>不定宽块状元素：

　　加入table标签——利用table标签长度自适应，可以看作定宽元素，然后利用左右margin设置auto实现居中

　　设置display: inline——父控件text-align: center,子控件display:inline

　　position: relative   &&  left: 50%：

　　父元素float，relative，left50%，子元素relative，left-50%

.container{
    float:left;
	position:relative;
	left:50%
}

.container ul{
	list-style:none;
	margin:0;
	padding:0;
	
	position:relative;
	left:-50%;
}

2.垂直居中：

>父元素高度确定的单行文本——设置height=line_height，弊端——超出宽度时会脱离块

>父元素高度确定个多行文本：

　　使用table，同时设置vertical-align: middle(td标签默认此属性)，对inline-block类型的子元素有用

　　display: table-cell

3.隐式改变display类型：

 当元素设置了：

position: absolute

float: left 或 right　　

 元素会自动变为 display: inline-block。

比如设置了absolute后就可以设置宽高了

CSS——水平/垂直居中

标签：

原文地址：http://www.cnblogs.com/congyue-pepsi/p/5671614.html