居中的几种方法

水平居中

行内元素水平居中

.center{
	text-align:center;
}

块级元素水平居中

• 已知宽度块级元素水平居中

.center{
	width:200px;
	margin:0 auto;
	border:1px solid #ccc;
}

• 未知宽度块级元素水平居中，宽度不固定

1. 设置table值

.center{
	display:table;
	margin:0 auto;
	border:1px solid red;
}

2. 设置inline-block(多个块状元素)
   子元素设置为inline-block，同时父元素设置为text-align:center

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

3. 设置flex布局
   把需要居中的块级元素的父元素设置为display:flex; justify-content:center;

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

水平垂直居中

1. 绝对定位+margin：auto

.parent{
	position:relative;
}
.child{
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	margin:auto;
}

2. 绝对定位+负margin(需要知道宽和高)

.parent{
	position:relative;
}
.child{
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-100px;
	margin-top:-100px;
}

3. 绝对定位+transfrom（已知宽高）

.parent{
	position:relative;
}
.child{
	position:absolute;
	left:50%; /* 定位父级的50% */
	top:50%;
	transfrom:translate(-50%,-50%); /* 自己的50%*/
}

4. flex布局

.parent{
	height:600px;  /* 父元素的高度必须知道 */
	display:flex;
	align-items:center;  /* 子元素垂直居中*/
	justify-content:center; /* 子元素水平居中*/
}

5. table-cell实现居中
   设置display：table-cell相当于表格的td。单元格所包含的内联元素可以实现垂直居中

.parent{
	display:table-cell;
	text-align:center;
	vertical-align:middle;
  }
 .child{
 	display:inline-block;
 }