(转)margin 实现水平居中，垂直居中原理

原文地址:margin 实现水平居中，垂直居中原理

首先了解下，margin的auto属性的作用是用来分配剩余空间，所以对于有剩余空间的元素才有效哦（块及元素）。
比如图片设置margin: 0 auto是无效的，因为图片是内联元素，不是占一整行，没有剩余空间。

1、块及元素水平方向居中

原理：两侧auto，则平分剩余空间，相当于水平居中。

<div class="out-box">
  <div class="div1">    
  </div>
</div>
 
.out-box{
  background-color: black;
}
 
.div1 { 
  margin: 0 auto; 
  width:200px;  
  height: 200px;
  background-color: red;
}

image.png

2、块及元素水平居右

原理：一侧auto，一侧没设置，则设置auto的一侧分配所有剩余空。

div {
 width:200px; 
height: 200px; 
margin-left: auto;
}

image.png

3、实现垂直方向的居中可以用绝对定位

div  {
                background: #FF0000;
                width: 200px;
                height: 200px;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }

margin: auto; 是关键，没有设置此项，也不会水平垂直居中哦。

image.png

解释下原理:

1.在普通内容流中，margin:auto的效果等同于margin-top:0;margin-bottom:0。

2.position:absolute使绝对定位块跳出了内容流，内容流中的其余部分渲染时绝对定位部分不进行渲染。

3.为块区域设置top: 0; left: 0; bottom: 0; right: 0;将给浏览器重新分配一个边界框，此时该块块将填充其父元素的所有可用空间，所以margin 垂直方向上有了可分配的空间。

4.再设置margin 垂直方向上下为auto，即可实现垂直居中。（注意高度得设置）。