1、水平居中
1.1、行内元素水平居中这里行内元素是指文本text、图像img、按钮超链接等，只需给父元素设置text-align:center即可实现。.box {
text-align: center;
background-color: #f6e5dd;
}
水平居中
1.2、块级元素水平居中
1.2.1、固定宽度块级元素水平居中只需给需要居中的块级元素加margin:0 auto即可，但这里需要注意的是，这里块状元素的宽度width值一定要有.box {
width: 200px;
margin: 0 auto; /*左右margin值auto自动，不能为0*/
background-color: #f6e5dd;
}
1.2.2、不固定宽度块级元素水平居中方法1：设置table布局通过给要居中显示的元素，设置display:table，然后设置margin:0 auto来实现.box {
display: table;
margin: 0 auto;
background-color: #f6e5dd;
}
方法2：设置子元素inline-block(多个块状子元素均可居中)子元素设置inline-block，同时父元素设置text-align:center.box {
text-align: center;
background-color: #f6e5dd;
}
.inlineblock-div {
display: inline-block; /*不能设置为block或其他*/
text-align: center;
background-color: #d5eeeb;
}
方法3：设置flex布局只需把要处理的块状元素的父元素设置display:flex,justify-content:center;.box {
display: flex;
justify-content: center;
background-color: #f6e5dd;
}
.flex-div {
background-color: #d5eeeb;
border: 2px solid red;
}
2、垂直居中
2.1、单行文本垂直居中设置line-height=height；.box {
height: 100px;
line-height: 100px;
background-color: #f6e5dd;
}
2.2、 多行文本垂直居中通过设置父元素table，子元素table-cell和vertical-alignvertical-align:middle的意思是把元素放在父元素的中部.box {
display: table;
width: 300px;
height: 200px;
background-color: #f6e5dd;
}
.table-div {
display: table-cell;
vertical-align: middle;
border: 5px solid blue;
}
垂直居中的文本
另一行文本
2.3、块级元素垂直居中方法1：flex布局在需要垂直居中的父元素上，设置display:flex和align-items：center要求：父元素必须显示设置height值.box {
height: 100px;
width: 300px;
display: flex;
align-items: center;
background-color: #f6e5dd;
}
.item {
background-color: #d5eeeb;
}
方法2：利用position和top和负margin(需知宽高).parent {
position: relative;
height: 200px;
width: 200px;
background-color: #f6e5dd;
}
.child {
position: absolute;
height: 100px;
width: 150px;
top: 50%;
margin-top: -50px; /*高度的一半*/
line-height: 100px;
background-color: #d5eeeb;
}
方法3：利用position和top和transformtransform中translate偏移的百分比就是相对于元素自身的尺寸而言的。.parent {
position: relative;
height: 200px;
width: 200px;
background-color: #f6e5dd;
}
.child {
position: absolute;
top: 50%;
transform: translate(0, -50%);
background-color: #d5eeeb;
}
3、水平垂直居中
3.1、绝对定位 + 负 Margin原理：首先利用 absolute 定位把容器块 左顶角 对准浏览器中心，然后再使用 负 margin 把容器块向左移动自身宽度的一半，向上移动自身高度的一半，即可以把容器块的中心移到浏览器中心。
优点：兼容性好
缺点：需要知道宽高，不够灵活.container {
/* —容器盒子水平、垂直居中对齐— */
width: 200px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px; /* 宽度的一半 */
margin-top: -50px; /* 高度的一半 */
/* —内容居中对齐— */
line-height:100px;/* 同容器盒子的高度一致 */
text-align: center;
background: #f6e5dd;
}
3.2、绝对定位+Transform原理：首先利用 absolute 定位把容器块 左顶角 对准浏览器中心，然后再使用 CSS3 transform 的 translate(x,y) 把容器块向左(x)移动自身宽度的一半，向上(y)移动自身高度的一半，即可以把容器块的中心移到浏览器中心。
优点：不依赖盒子的宽高，比较灵活
缺点，兼容不好，在移动设备上建议使用.container {
/* —容器盒子水平、垂直居中对齐— */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
/* —内容居中对齐— */
line-height: 100px;
/* 同容器盒子的高度一致 */
text-align: center;
background: #e6f4f5;
}
3.3、绝对定位 + 自动 Margin原理：浏览器自动计算绝对定位的容器块上下左右外边距。
优点：灵活切兼容性好(IE8+)
缺点：适用于本身有尺寸的元素(比如图片)，对于段落等必须显式设置其宽高.container {
/* —容器盒子水平、垂直居中对齐— */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 200px;
height: 100px;
/* —内容居中对齐— */
line-height: 100px;
/* 同容器盒子的高度一致 */
text-align: center;
background: #d5eeeb;
}
3.4、Flex布局优点：不需要知道宽高
缺点：相对于父容器定位，兼容性不好.container {
/* —容器盒子水平、垂直居中对齐— */
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 100px;
background: #d5eeeb;
}
.child {
background: #f6e5dd;
height: 50px;
width: 100px;
}
