css实现水平居中的几种方式

一、居中元素定宽高

1、absolute+（-margin）

html代码如下

<div class = "box">
	<div class = "content">123</div>
</div>

相应css代码如下

.box {
	position: relative;
	height: 300px;
}
.content {
	background-color: pink;
	width: 200px;
	hieght:200px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -100px;
	margin-top: -100px;

}

2.absolute + margin(auto)

html代码如下

<div class = "box">
	<div class = "content">123</div>
</div>

相应css代码如下：

.box {
	position: relative;
	height: 300px;
}
.content {
	background-color: pink;
	width: 200px;
	height: 200px;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

注意：

• 使用上面这两种方法，父元素必须设置高度
• 第二种方法，子元素的高度可以不设置

3.absolute + cacl

CSS3带来了计算属性，既然top的百分比是基于元素的左上角，
那么在减去宽度的一半就好了，代码如下：
html代码如下

<div class = "box">
	<div class = "content">123</div>
</div>

相应css代码如下：

.box {
	position: relative;
	height: 300px;
}
.content {
	background-color: pink;
	width: 200px;
	height: 200px;
	position: absolute;
	left: cacl(50%-100px);
	top: cacl(50%-100px);
}

二、居中元素不定宽高

html代码如下

<div class = "box">
	<div class = "content">123</div>
</div>

css公共样式代码如下：

.box {
			width: 100%;
			height: 300px;
			
		}
		.content {
			width: 200px;
			/*height: 200px;*/
			background-color: pink;
			position: absolute;
			/*left: 50%;
			top: 50%;
			margin-top: -100px;
			margin-left: -100px;*/
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			margin: auto;
		}

1.absolute + transform

这个方法不需要子元素固定宽高，所以不再需要size类了。
使用css3新增的transform，transform的translate属性也可以
设置百分比，其是相对于自身的宽和高，所以可以讲translate
设置为-50%，就可以做到居中了，代码如下：

.box {
	position: relative;
}
.content {
	background-color: pink;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}