【html5/css3】水平居中，垂直居中以及水平垂直居中方法

水平居中

默认html:

<div class="parent">
   <div class="child">child</div>
</div>

默认css:

 .parent{
    width: 400px;
    height: 80px;
    line-height: 80px;
    background: #ccc; 
 }
 .child{
     width: 80px;
     height: inherit;
     color: #fff;
     background: #000;      
 }

图示：

水平居中：

① 使用inline-block + text-align
使用text-align可以使内联标签、内联块的标签进行水平居中，那么我们就可以在子级child从块级标签变成内联块便签，在其父级使用text-align进行水平居中即可，代码添加如下：

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

图示：

② 使用table + margin
子级使用table让其具有表格块级元素的特性，此时可以通过margin左右auto的特性，将其水平居中代码如下：

 .child{5
     display: table;
     margin: 0 auto;   
 }

图示：

③ 使用相对定位和绝对定位position + transform
父级使用relative相对定位，子级child使用absolution相对父级进行绝对定位，然后子级通过left50%，将其最左边定位到父级的中间部位，然后通过transform中的translateX为-50%，将其中心定位到父级的中心部分代码如下：

.parent{
   position: relative;
}
.child{
   position: absolute;
   left: 50%;
   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   -o-transform: translateX(-50%); 
   transform: translateX(-50%);    
}

图示：

④ 使用flex + justify-content
将父级内部元素的布局更改为flex布局,并且通过justify-content约束内部元素为水平居中，代码如下：

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

当然也可以使用flex + margin也是可以进行水平居中的，代码如下：

 .parent{
    display: flex;
    /* justify-content: center; */
 }
 .child{
	margin: 0 auto;
}

两种都可以将内部元素进行水平居中，图示：

垂直居中

默认html:

<div class="parent">
   <div class="child">child</div>
</div>

默认css:

 .parent{
    width: 80px;
    height: 400px;
    background: #ccc; 
 }
 .child{
	 width: inherit;
     height: 80px;
     color: #fff;
     background: #000;      
 }

图示：

垂直居中：
① 使用table-cell + vertical-align
同理使用表格格元素的特性代码如下：

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

图示：

② 使用相对定位决定定位position + transform
同水平居中的原理一下，配合position和transform的自身偏移即可完成代码如下：

.parent{
   position: relative;
}
.child{
   position: absolute;
   top: 50%;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -o-transform: translateY(-50%); 
   transform: translateY(-50%);    
}

③ 使用flex定位flex + align-items
父级使用flex布局配合align-items实现内部元素垂直居中代码如下：

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

同理flex布局可以使用margin：

 .parent{
    display: flex;
    /* align-items: center; */
 }
 .child{
	margin: auto 0;
}

两种方法都可以是元素垂直居中
图示：

水平垂直居中

默认html：

<div class="parent">
   <div class="child">child</div>
</div>

默认css：

 .parent{
     width: 400px;
     height: 400px;
     background: #ccc;
 }
 .child{
     width: 80px;
     height: 80px;
     line-height: 80px;
     text-align: center;
     color: #fff;
     background: #000;      
 }

图示：

水平垂直居中：
① inline-block + text-align + table-cell + vertical-align
根据利用单元格特性的思路就是结合水平居中的inline-block + text-align和垂直居中的table-cell + vertical-align代码如下：

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

图示：

② 使用相对和绝对定位position + transform
同样综合了水平居中和垂直居中的position + transform代码如下：

.parent{
   position: relative;
}
.child{
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%,-50%);
   -moz-transform: translate(-50%,-50%);
   -ms-transform: translate(-50%,-50%);
   -o-transform: translate(-50%,-50%); 
   transform: translate(-50%,-50%);    
}

原理不需多讲，就是全局top和left让内部元素的左上角对准父级的中心，然后自身通过translate进行内部偏移，图示就如上一张一样；

③ 使用相对和绝对定位position + margin偏移
结合父级相对定位，子级绝对定位，通过top/left/right/bottom都为0进行上下左右拉伸，最好通过margin为auto的约束元素到父级的中心，具体看代码：

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

④ 使用flex布局中的justify-content + algn-items
关于对flex布局不是很了解的可以看这篇文章 flex布局总结，那么我们直接看代码：

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

结语

关于对水平居中、垂直居中、水平垂直居中的方法总结就到这里，不难看出方法都是万变不离其宗，整体下来很多都是差不多的，好了，如有错误，欢迎指正，小弟承蒙各位大佬的意见~