再谈水平垂直居中

DOM结构

	<div class="wrapper">
		<div class="box"></div>
	</div>
	<div class="container">
		<span class="box-2"></span>
	</div>

1. flex+margin: auto—— 水平垂直居中块级元素或行内级元素
   容器内只有一个子元素：使用display: flex加margin: auto，父元素使用flex布局，子元素使用margin: auto属性；具体可以参考中国第五届CSS大会视频；如果子元素设置margin-top，则子元素布局位于左下角；若子元素设置margin-left，则元素布局位于右上角；auto会自动占据容器的可用空间；因此，marign-left会使元素右对齐，margin-top会使元素底对齐；

   该方法对于内层是行内级元素也同样适用；具体查看demo、demo2

   当外层没有专门设置display: flex属性时，如我们常见的使用margin: 0 auto进行水平居中；水平方向auto评分可用空间，故元素会水平居中；而垂直方向的高度具有很高的扩展性，经常是补丁的，所以会通常margin: auto会将垂直方向的auto解析为0而不是平分可用空间使其居中；

   在flex布局中，由于容器和项目的父子容器关系被承认，也因此在垂直方向上有了可计算的基准，故在外层设置display: flex属性后内层元素可以通过margin: auto属性进行水平垂直居中；

   	.wrapper {
   		position: relative;
   		display: flex;
   		width: 600px;
   		height: 400px;
   		overflow: hidden;
   		background: orange;
   	}
   	.box {
   		margin: auto;
   		width: 50%;
   		height: 50%;
   		background: lightblue;
   	}
   

   

2. flex布局 —— 居中块级元素或者行内级元素

   	.wrapper {
   		position: relative;
   		display: flex;
      		justify-content: center;
           align-items: center;
   		width: 100vw;
   		height: 60vw;
   		overflow: hidden;
   		background: orange;
   	}
   	.box {
   		width: 30%;
   		height: 50%;
   		background: lightblue;
   	}
   

3. grid布局 —— 水平垂直居中块级元素或行内级元素
   代码如下，具体查看demo

   	.wrapper {
   		display: grid;
   		width: 100vw;
   		height: 60vw;
   		background: orange;
   	}
   	.box {
   		width: 30%;
   		height: 50%;
   		place-self: center; /* justify-self与align-self的缩写 */
   		background: lightblue;
   	}
   

4. position: absolute + transform —— 子元素宽度未知或已知：
   代码实现如下，具体查看demo

   	.wrapper {
   		position: relative;
   		width: 100vw;
   		height: 60vw;
   		background: orange;
   	}
   	.box {
   		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%);
   		width: 30%;
   		height: 50%;
   		background: lightblue;
   	}
   

5. position: absolute + margin —— 子元素宽度已知：
   代码实现如下， 具体可查看demo：

   	.wrapper {
   		position: relative;
   		width: 100vw;
   		height: 60vw;
   		background: orange;
   	}
   	.box {
   		position: absolute;
   		top: 50%;
   		left: 50%;
      		margin-top: -15%;
      		margin-left: -15%;
   		width: 30%;
   		height: 50%;
   		background: lightblue;
   	}
   

6. position: absolute + margin: auto
   代码如下所示，具体可查看demo，此时的效果和类型一中使用flex+margin: auto情况类似；

   	.wrapper {
   		position: relative;
   		width: 100vw;
   		height: 60vw;
   		background: orange;
   	}
   	.box {
   		position: absolute;
   	    top: 0;
   	    left: 0;
   	    right: 0;
   	    bottom: 0;
   		width: 30%;	 /* 如果不设置宽高，默认宽高为容器宽高 */
   		height: 50%;
     		margin: auto;
   		background: lightblue;
   	}
   

7. display: table-cell + text-align: center + vertical-align: middle —— inline/ inlie-block元素
   代码实现如下，具体可查看demo

   	.wrapper {
   		position: relative;
   		display: table-cell;
   		width: 100vw;
   		height: 60vw;
   		text-align: center;
   		vertical-align: middle;
   		background: orange;
   	}
   	.box {
   
   	}
   

---

参考文献：

1. https://www.yuque.com/cssconf/5th
2. https://www.w3schools.com/cssref/pr_class_display.asp
3. https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex