你不知道的 css 垂直居中

主要研究的是垂直水平居中的各种方法。

task_1_4

水平垂直居中有相同点也有不同点，接下来讨论常见的方式。

水平居中

margin法

需要满足三个条件:

元素定宽
元素为块级元素或行内元素设置display:block
元素的margin-left和margin-right都必须设置为auto
三个条件缺一不可。

demo:

div{
	width: 300px;
	height: 300px;
	border: 1px solid #000;
}
span{
	display: block;
	width: 100px;
	margin: 0 auto;
	height: 100px;
	background: #f00;
}

定位法

需要满足三个条件：

元素定宽
元素绝对定位，并设置left:50%
元素负左边距margin-left为宽度的一半

demo1:

div{
	position: relative;
	width: 300px;
	height: 300px;
	border: 1px solid #000;
}
span{
	position: absolute;
	left: 50%;
	margin-left: -50px;
	width: 100px;
	height: 100px;
	background: #f00;
}

有些时候我们的元素宽度可能不是固定的，不用担心，我们依然可以使用定位法实现水平居中，此时需要用到css3中的transform属性中的2d转换，向左偏移50%的宽度。
遗憾的是，这种方法需要IE9+才可以实现。

demo2

div{
	position: relative;
	width: 300px;
	height: 300px;
	border: 1px solid #000;
}
span{
	position: absolute;
	left: 50%;
	-webkit-transform: translate(-50%,0);
	-ms-transform: translate(-50%,0);
	-o-transform: translate(-50%,0);
	transform: translate(-50%,0);
	height: 100px;
	background: #f00;
}

不定宽

文字水平居中

对于单行文字来说，直接使用text-align: center即可。
多行文字可以参考margin法和定位法。

垂直居中

定位法

和水平居中类似，只是把left:50%换成了top:50%，负边距和transform属性进行对应更改即可。

优点：能在各浏览器下工作，结构简单明了，不需增加额外的标签。

demo1:

div{
	position: relative;
	width: 300px;
	height: 300px;
	border: 1px solid #000;
}
span{
	position: absolute;
	top: 50%;
	margin-top: -50px;
	width: 100px;
	height: 100px;
	background: #f00;
}

demo2

div{
	position: relative;
	width: 300px;
	height: 300px;
	border: 1px solid #000;
}
span{
	position: absolute;
	top: 50%;
	-webkit-transform: translate(0,-50%);
	-ms-transform: translate(0,-50%);
	-o-transform: translate(0,-50%);
	transform: translate(0,-50%);
	height: 100px;
	background: #f00;
}

不定宽

单行文本垂直居中

需要满足两个条件：

元素内容是单行，并且其高度是固定不变的。
将其line-height设置成和height的值一样

这是一段文字

div{
	width: 300px;
	height: 300px;
	border: 1px solid #000;
}
span{
	line-height: 300px;
}

结语

以上各种方法稍加组合即可时实现水平和垂直居中，除了以上方法之外还有flex布局同样可以方便的实现居中的效果，但是目前掌握不精，就先不献丑了。这些就是平时用到较多的一些居中的方法，希望大家看完之后有收获:)

参考资料

我的IFE代码仓库
 css制作垂直水平居中