div在各种情况下的居中

这里根据以往经验，总结了div居中的各种情况，请大家使劲拍我~

1、水平方向：一般情况下块状元素居中
    给div设置宽度，添加margin:0 auto;
例如：

<span style="font-size:14px;">div{
	width:500px;
	height:300px;
	margin:0 atuo;
	background-color:pink;//为显示效果，添加背景颜色
}</span>

2、水平方向：浮动元素的居中
给div设置宽度、高，添加margin
例如：

<span style="font-size:14px;">.div{
			  width:400px;
			  height:300px;
			  float:left;
              position:relative;
              margin:0 0 0 -200px;        
              background-color:pink;
              top:50%;
              left:50%;                   
    }</span>

3、水平方向：绝对定位的元素居中

<span style="font-size:14px;">.div{
            width:400px;
            height:300px;
            background-color:pink;
            position:absolute;
            top:0;
            left:50%;
            margin-left:-200px;
	}</span>

4、水平方向：不定宽块状元素的居中
加入table标签，设置display：inline,同时设置position：relative和left：50%（理论上可行，但不推荐这样做，加入table标签会造成一系列问题）
 

<span style="font-size:14px;">.div{
            display:inline;
            position:relative;
            left:50%;
     }</span>

5、水平方向：多个块状元素的居中
将元素的display属性设置为inline-block，并且把父元素的text-align属性设置为center

<span style="font-size:14px;">.parent{
            text-align: center;
        }
.div{
            width:100px;
            height:100px;
            display:inline-block;
     }
</span>

6、水平居中：多个块状元素解决方案 (使用flexbox布局实现)
使用flexbox布局，只需要把待处理的块状元素的父元素添加属性display:flex及justify-content:center

<span style="font-size:14px;">.parent{
            display:flex;
            justify-content:center;
        }
.div{
            width:100px;
            height:100px;
     }</span>

7、垂直居中-父元素高度确定的单行文本

设置父元素的height和line-height高度一致

8、垂直居中-父元素确定的多行文本/图片/块级元素

1)插入table标签，同时设置vertical-align:middle;//IE8以下（不推荐使用table）

2）设置块级元素的display:table-cell,激活vertical-align设置为middle

9、垂直居中-已知高度的块状元素

<span style="font-size:14px;">.div{
            top: 50%;
            margin-top: -100px;  /* margin-top值为自身高度的一半 */
            position: absolute;
            padding:0;
        }
</span>