元素实现水平垂直居中

让一个块级元素实现水平垂直居中（如下图）的方式有很多种，在这里总结一下

1. absolute+margin

CSS代码：

	.wrapper{
	   width: 200px;
	   height: 200px;
	   border: 1px solid black;
	   position: relative;
	}
	.content{
	   width: 100px;
	   height: 100px;
	   border: 1px solid red;
	   position: absolute;
	   top: 50%;
	   left: 50%;
	   margin-top: -50px;
	   margin-left: -50px;
	}

HTML代码

<div class="wrapper">
    <div class="content">12345</div>
</div>

2. absolute+margin:auto

CSS代码

.wrapper{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            position: relative;
        }
        .content{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }

这种方法实际上是想利用margin: auto来实现水平垂直居中，但是margin:auto默认情况下只会自动计算左右的边距实现水平居中，也就是说，默认情况下，margin:auto和margin: 0 auto没啥区别，因此，要实现水平垂直居中还要加上绝对定位，并设置上下左右的距离都是0；
3. absolute+transform

	.wrapper{
	     width: 200px;
	     height: 200px;
	     border: 1px solid black;
	     position: relative;
	 }
	 .content{
	     width: 100px;
	     height: 100px;
	     border: 1px solid red;
	     position: absolute;
	     top: 50%;
	     left: 50%;
	     transform: translate( -50%, -50% );
	 }

4. flex

	.wrapper{
	     width: 200px;
	     height: 200px;
	     border: 1px solid black;
	     display: flex;
	     justify-content: center;
	     align-items: center;
	 }
	 .content{
	     width: 100px;
	     height: 100px;
	     border: 1px solid red;
	
	 }

5. text-align和vertical-align

	.wrapper{
	     width: 200px;
	     height: 200px;
	     border: 1px solid red;
	     text-align: center;
	     line-height: 200px;
	 }
	 .content{
	     width: 100px;
	     height: 100px;
	     border: 1px solid black;
	     display: inline-block;
	     vertical-align: middle;
	     line-height: initial;
	     text-align: left;
	 }

使用text-align可以使子元素实现水平居中，并且会连带子元素中的文字一起水平居中。所以，需要后期进行校正。