聊聊CSS(2)：12种居中方式

CSS让元素居中是个经典的问题，那么问题来了，共有哪几种方式？不同的居中方式又分别适用于哪些情况？12种CSS居中方式来看看都有哪些哒~

##1.使用自动外边距margin:0 auto实现水平居中

	.container{
		margin: 0 auto;//简写形式
		background: red;
		width: 800px;
	}

可以为需要居中的元素创建一个起容器作用的div，添加一个如上所示的类，但要注意为该容器指定宽度。这是为什么捏？因为没有宽度会自动扩展到两端，也就看不出居中效果了，当然咯，对块级元素有效

##2.使用text-aling实现水平居中

.container{
	text-align: center;
}

把例如a标签，p标签等用一个class为container的div包起来，单独对行内元素应用text-aling:center;没有效果，可以考虑外面包一层div。可用于文字的居中

##3.单行行内垂直居中:height=line-height

div{
	height:100px;
	line-height:100px;
}

将行高和高度设置一样达到居中效果，适用于单行行内元素居中的情况。

##4.多行行内垂直居中，把容器当做表格单元

div{
	width: 100px;
	height: 100px;
	background: red;
	display: table-cell;
	vertical-align: middle;
}

当行内元素内容过多时会换行，这时候使用行高=高度就会发生错误，可以使用display:table-cell;vertical-aling:middle;当然长宽也是必要的，否则收缩包裹后依然看不出效果,此div可以包裹a标签或p标签。

display table 实现垂直居中的浏览器支持情况：ie8+ webkit firefox opera

##5.父元素相对定位，子元素绝对定位的居中，负外边距的居中

.div1{
	width: 100px;
	height: 100px;
	background: red;
	position: relative;
}
.div2{
	height: 50px;
	width: 50px;
	background: yellow;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -25px;
	margin-top: -25px;
}

通过让子元素相对于父元素绝对定位，并移动left,top形成居中效果，若只是想左右或者垂直居中，left,top只写一方面就好了。此方法要求元素有确定的宽高值。否则的话就要通过JavaScript来进行一些小计算了。在IE6上也可以哦~

##6.多行内容居中，且容器高度可变:设置上下padding

div{
	background: red;
	width: 100px;
	padding-top: 20px;
	padding-bottom: 20px;
}

原理很简单通过给上下增加相同的间距使得看起来像是居中一样。此样式的要求是容器不能有固定的高度

##7.背景图片的居中:background-position:center;

div{ 
	background-image:url('/i/eg_bg_03.gif');
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:center;
}

注意需要把 background-attachment 属性设置为 “fixed”，才能保证该属性在 Firefox 和 Opera 中正常工作。在火狐浏览器(37.0.1)中试过的确没有fixed是不行的，但是chrome和IE都是可以的

##8.CSS3弹性盒模型flex

div{ 
  	background: red;
	height: 100px;
	display: flex;
	justify-content:center;
	/* 左右居中 */
	align-items:center;
	/* 上下居中 */
}

display:flex;是CSS3新增的一个布局方式，IE10不支持，但IE11上已经可以使用了， flex布局以前需要增加前缀，IE 11+,Firefox 22+,Chrome 29+,Opera 12.1 支持无前缀最新，亲测在最新的chrome和IE，火狐上都可用不必在添加前缀，语法说到display:flex;以前有用display:box;

有兴趣的还可以看看大漠这篇关于flex的讲解：Flexbox——快速布局神器

一丝的demo跨浏览器的CSS flex

flex 实现不固定大小垂直居中浏览器支持情况：ie10+ webkit opera firefox

##9.使用CSS3的translate属性

div{
	width:100px;
	height:100px;
	background:red;
    position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}

transform:translate()含义是变动，位移；如transform:translate(50px,0)表示向右位移50像素，都为正表示向右上位移，都为负表示向左向下位移。 transform是CSS3新增的一个属性，还可以用它别的属性形成旋转，放大等效果

translate 实现垂直居中的浏览器支持情况 ie9+ webkit firefox opera，实测IE8无效

##10.用:before伪元素实现水平垂直居中关键代码：

body{
    min-width:500px;
    background:#999;
    font-size:100%;
}
.wrap {
    text-align: center;
    height:100%;
}
.wrap:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}
.centered {
    display: inline-block;
    vertical-align: middle;
    width: 480px;
    background:#eee;
    text-align:left;
}

要查看完整效果可查看在偶jsbin上写的一个例子用:before伪元素实现居中

或者放在codepen上的例子codepen:用before伪元素实现居中

##11.利用margin:auto;实现水平垂直居中我们知道margin:0 auto可以实现居中，而margin:auto 0这样的的垂直居中不存在，可是margin:auto;却是能实现居中效果的哟~

.div1{
	margin: auto;  
	position: absolute;  
	top: 0; left: 0; bottom: 0; right: 0;  
}

要注意的就是需要声明元素高度

##12.inline-block实现元素水平居中

.div1{
    text-align: center;
    background: red;
}
.div2{
    display: inline-block;
    border: 1px black solid;
}

适用于不定宽的元素，当margin:0 auto等确定宽度的方法没有用了，那么就可以用inline-block。要注意的就是元素如果有宽就不起作用啦~ inline-block具有一些特殊的混合行为.正如他的名字所暗示的，它具有块级元素的特点，也有行内元素的行为.从块级元素角度来说，可以为他设定外边距和内边距，也可以通过它简便而有效的包围其他块级元素.从行内元素角度看，他会收缩包裹自己的内容，而不是扩展填充父元素.换句话说，inline-block元素的宽度始终等于其内容宽度.

解决方案就是为要居中元素的父元素应用text-align:center，为要居中的元素设定display:inline-block.这样设定就可以得到我们想要的结果:没有宽度的元素也能在其父元素内居中.要再垂直居中此时可用line-height=height