CSS如何让元素水平，垂直，水平且垂直居中（最全集）
CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，如有漏掉的，还会陆续的补充进来，算做是一个备忘录吧。
元素水平居中的方式
1.行内元素水平居中
利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), 内联块(inline-block), 内联表(inline-table), inline-flex元素水平居中都有效。
.box{
width: 100%;
height: 500px;
background-color: #ccc;
/*css代码核心*/
text-align: center;
}
水平居中
2.块级元素的水平居中
2.1通过把固定宽度块级元素的margin-left和margin-right设成auto，就可以使块级元素水平居中。（行内块元素不适用）
.box{
width: 500px;
height: 500px;
background-color: #ccc;
/*css代码核心*/
margin:0 auto;
}
水平居中
如果是行内块元素居中，可以给父级元素设置text-align：center（如上1）
.box{
display: inline-block;
width: 500px;
height: 500px;
background-color: #ccc;
}
.box1{
width: 1000px;
height: 1000px;
background-color: #000;
/*css代码核心*/
text-align: center;
}
水平居中
2.2使用table+margin，先将子元素设置为块级表格来显示（类似），再将其设置水平居中，display:table在表现上类似block元素，但是宽度为内容宽。
.box{
width: 500px;
height: 500px;
background-color: #ccc;
/*css代码核心*/
display: table;
margin:0 auto;
}
.box1{
width: 1000px;
height: 1000px;
background-color: #000;
}
水平居中
2.3使用absolute+transform或者margin 先将父元素设置为相对定位，再将子元素设置为绝对定位，向右移动子元素，移动距离为父容器的一半，最后通过向左移动子元素的一半宽度以达到水平居中。（不过transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀。）
2.3.1在不知道自身大小的情况
Demo
2.3.2在知道自身大小情况下
.box{
width: 500px;
height: 500px;
background-color: #ccc;
/*css代码核心*/
position:absolute;
left:50%;/*这里也可以用具体数值*/
margin-left: -250px;
}
.box1{
width: 1000px;
height: 1000px;
background-color: #000;
/*css代码核心*/
position:relative;
}
水平居中
2.4使用flex+justify-content 通过给父级元素设置CSS3中的布局利器flex中的justify-content属性来达到水平居中。
Demo
2.5使用flex+margin 通过flex将父容器设置为为Flex布局，再设置子元素居中。
Demo
.box1 {
display: flex;
}
.box {
margin:0 auto;
}
3.多块级元素水平居中
3.1利用flex布局 实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（默认横轴）方向上的对齐方式，本例中设置子元素水平居中显示
#container {
display: flex;
justify-content: center;
}
3.2利用inline-block 将要水平排列的块状元素设为display:inline-block，然后在父级元素上设置text-align:center，达到与上面的行内元素的水平居中一样的效果。
.container {
text-align: center;
}
.inline-block {
display: inline-block;
}
4.浮动元素水平居中
4.1对于定宽的浮动元素，通过子元素设置relative + 负margin或者relative + transform
.box{
width: 500px;
height: 500px;
background-color: #ccc;
float: left;
/*css代码核心*/
position:relative;
left:50%;
/*margin-left:-250px;*/
transform: translateX(-50%);
}
.box1{
width: 1000px;
height: 1000px;
background-color: #000;
}
水平居中
4.2不定宽的浮动元素 通过父子容器都相对定位（注意：要清除浮动，给外部元素加上float。这里的父元素就是外部元素）
我是浮动的
我也是居中的
.box{
float:left;
position:relative;
left:50%;
}
p{
float:left;
position:relative;
right:50%;
}
4.3通用办法flex布局(不管是定宽还是不定宽) 利用弹性布局(flex)的justify-content属性，实现水平居中。
.parent {
display:flex;
justify-content:center;
}
.chlid{
float: left;
width: 200px;//有无宽度不影响居中
}
我是要居中的浮动元素
5.绝对定位元素水平居中 通过子元素绝对定位，外加margin: 0 auto来实现而且left与right均为0。
让绝对定位的元素水平居中对齐。
.parent{
position:relative;
}
.child{
position: absolute; /*绝对定位*/
width: 200px;
height:100px;
background: yellow;
margin: 0 auto; /*水平居中*/
left: 0; /*此处不能省略，且为0*/
right: 0;/*此处不能省略，且为0*/
}
元素垂直居中的方式
1.单行内联元素垂直居中
在父级元素height有确切值下设置行高等于高
单行内联元素垂直居中。。
2.多行内联元素垂直居中
2.1利用flex布局（flex）其中flex-direction: column定义主轴方向为纵向。这种方式在较老的浏览器存在兼容性问题。
利用flex布局（flex）其中flex-direction: column定义主轴方向为纵向。这种方式在较老的浏览器存在兼容性问题。
2.2利用表布局（table）利用表布局的vertical-align: middle可以实现子元素的垂直居中
利用表布局（table）利用表布局的vertical-align: middle可以实现子元素的垂直居中
3.块级元素垂直居中
3.1使用absolute+负margin(已知高度宽度)或者使用absolute+transform
3.1.1在已经知道高度情况下通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可以实现了。
元素垂直居中
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}
3.1.2在不知道高度下当可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。
元素垂直居中
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
3.2使用flex+align-items通过设置flex布局中的属性align-items，使子元素垂直居中。
元素垂直居中
.parent {
display:flex;
align-items:center;
}
3.3使用table-cell+vertical-align通过将父元素转化为一个表格单元格显示（类似 和 ），再通过设置 vertical-align属性，使表格单元格内容垂直居中
元素垂直居中
3.4.利用flex布局实现垂直居中，其中flex-direction: column定义主轴方向为纵向。因为flex布局是CSS3中定义，在较老的浏览器存在兼容性问题。
.center-flex {
display: flex;
flex-direction: column;
justify-content: center;
}
3.5利用“精灵元素”(ghost element)技术实现垂直居中，即在父容器内放一个100%高度的伪元素，让文本和伪元素垂直对齐，从而达到垂直居中的目的。
.ghost-center {
position: relative;
}
.ghost-center::before {
content: " ";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.ghost-center p {
display: inline-block;
vertical-align: middle;
width: 20rem;
}
元素水平垂直居中的方式
1.在明确高度和宽度情况下
1.1绝对定位与负边距实现 兼容所有浏览器
.box{
width: 100px;
height: 100px;
background-color: #ccc;
/*css核心代码*/
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
}
.box1{
width: 1000px;
height: 1000px;
background-color: #000;
/*css核心代码*/
position: relative;
}
水平居中
1.2绝对定位与margin:auto 这种方式无需知道被垂直居中元素的高和宽，但不能兼容低版本的IE浏览器。
.box{
width: 100px;
height: 100px;
background-color: #ccc;
/*css核心代码*/
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.box1{
width: 1000px;
height: 1000px;
background-color: #000;
/*css核心代码*/
position: relative;
}
水平居中
2.在不知道高度宽度情况下（当然在高度和宽度已知也可用）
2.1绝对定位+transform CSS3的transform固然好用，但在项目的实际运用中必须考虑兼容问题，大量的hack代码可能会导致得不偿失。
#container {
position: relative;
}
#center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
2.2flex布局 利用flex布局，其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。不能兼容低版本的IE浏览器。
#container {//直接在父容器设置即可
height: 100vh;//必须有高度
display: flex;
justify-content: center;
align-items: center;
}
2.3flex/grid与margin:auto(最简单写法)容器元素设为 flex 布局或是grid布局，子元素只要写 margin: auto 即可,不能兼容低版本的IE浏览器。
#container {
height: 100vh;//必须有高度
display: grid;
}
#center {
margin: auto;
}
2.4当要被居中的元素是inline或者inline-block的时候，可以巧妙的将父级容器设置为display:table-cell，配合text-align:center和vertical-align:middle即可以实现水平垂直居中。
#container{//父级元素加
display:table-cell;
text-align:center;
vertical-align:middle;
}
2.5屏幕上水平垂直居中 屏幕上水平垂直居中十分常用，常规的登录及注册页面都需要用到。要保证较好的兼容性，还需要用到表布局。
水平垂直居中
参考1
参考2
参考3