• 水平居中
  • 1、行内元素
  • 2、块级元素
  • 3、子元素包含 float:left 属性
  • 4、使用 flex
  • 5、使用CSS3新增的 transform 属性，子元素设置如下
  • 6、使用绝对定位
• 垂直居中
  • 1、元素高度不定
  • 2、使用 flex 布局
  • 3、使用 transform
  • 4、使用绝对定位
• 用JS方法实现

2、水平垂直居中

水平居中

1、行内元素

若是行内元素，给其父元素加text-align:center; 即可实现水平居中

.parent{
  text-align: center;
}
.child{
	display: inline-block;
}

2、块级元素

若是块级元素，该元素设置 margin:0 auto 即可

3、子元素包含 float:left 属性

若子元素带有浮动属性，为了让子元素水平居中，则可让父元素宽度设置为fit-content,并且配合marin即可实现居中。

(fit-content是CSS3中给width属性新加的一个属性值,它配合margin可以轻松实现水平居中, 目前只支持Chrome 和 Firefox浏览器.)

.parent{
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  margin: 0 auto;
}

4、使用 flex

使用flex布局，可以轻松的实现水平居中, 子元素设置如下

.son{
	display: flex;
  justify-content: center;
}

5、使用CSS3新增的 transform 属性，子元素设置如下

.son{
	position:absolute;
	left:50%;
	transform:translateX(-50%);
}

6、使用绝对定位

.son{
	//未知宽高
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	margin: auto;
	
	//知道宽高
	position:absolute;
	left:50%;
	width:200px;
	margin-left:-100px;
}

垂直居中

1、元素高度不定

table-cell配合vertical-align 优点：元素高度可以动态改变，不需要在CSS中定义

.parent{
   display: table;
}
.son{
	display:table-cell;
	vertical-align:middle;
}

2、使用 flex 布局

flex 2012版

.parent{
	display:flex;
	align-items:center;
}

flex2009版（不支持IE）

.parent{
	display:box;
	box-orient:vertical;
	box-pack:center;
}

3、使用 transform

.son{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
}

4、使用绝对定位

.son{
	//高度固定
	position:absolute;
	top:50%;
	height:500px;
	margin-top:-250px;
	
	//高度不固定
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
}

用JS方法实现

	//首先让盒子先绝对定位，然后设置盒子的left和top值即可
	left = (当前浏览器窗口的宽度-内容的宽度)/2+'px'
	left = ((document.documentElement.clientWidth || document.body.clientWidth)-ele.offsetWidth)/2+'px'
	top = (当前浏览器窗口的高度-内容的高度)/2+'px'
	top = ((document.documentElement.clientHeight || document.body.clientHeight)-ele.offsetHeight)/2+'px'