css 水平垂直居中总结

空闲总结了下水平垂直居中方案，欢迎补充：

水平居中

水平居中有两种情况:

• 子元素是内联元素

  这种那个情况下只需要在父元素定义: text-align:center;
  例子:
  html:

   //省略了body,html
    <div class="out-div">
      hello world
    </div>
    <div class="out-div">
        <span>
            same for a inline tag
        </span>
    </div>
  

  css:

   .out-div{
            height: 100px;
            background: blueviolet;
            text-align: center;
            border:1px solid black;
        }
  

  这里注意到out-div 并没有是设置水平宽度，然而其width依然占满了屏幕，这点在定宽块状元素的水平居中会谈。

• 子元素是块状元素

  • 子素的width确定，也就是定宽情况，只需要设置margin: auto;即可
    例子:
    html:

    <div class="block-out-div">
      <div class="block-div">
    
      </div>
    </div>
    

    css:

    .block-out-div
    {
        height: 100px;
        background: gold;
        margin:auto; //重点
    }
    .block-div{
        width: 50px;
        height: 50px;
        background: #cccccc;
    }
    

    原理： “正常流中的块级元素框的水平总和就等于父元素的width”(from css权威指南),这就是所谓块状元素正常情况下独占一行，一就是上面的div没设置width默认占满父元素的宽度。”在水平格式化的“7大属性”中，只有3个可以设置为auto: width, margin-left, margin-right”(from css权威指南),这七个值分别是 margin-left,border-left-width,padding-left,width,padding-right,border-right-width,margin-right
    .默认情况下这七个值应该等于父元素宽度.

  • 子元素宽度不确定
    这种情况下比较麻烦，但是解决方案有几种:
    1.利用table-cell原理，什么意思呢，table标签是特殊的标签，他会根据内容来确定自己宽度，所以在需要居中的内容里面套上一套table即可,相当套了一个定宽的块状元素，然后给这个table设置margin:auto即可
    具体示例如下:

    <div class="block-out-div">
    <table class="table-wrap">
        <tr>
            <td>
                <div class="no-width-box">
                    宽度不确定
                </div>
            </td>
        </tr>
    </table>
    </div>
    

    只需设置table,css:

        .table-wrap{
            margin: auto;
        }
    

    这种做法缺点是增加了标签，破坏了语义化
    2.第二种简单的方式是直接给需要设置居中子元素设置：display:inline-block;使得子元素拥有内联元素的特性，这时候为父元素设置：text-align:center;就可以居中了.
    例子：
    html:

    <div class="block-out-div">
        <div class="no-width-box">
            宽度不确定
        </div>
    </div>
    

    css:

       .block-out-div
        {
            height: 100px;
            background: gold;
            border: 1px solid black;
            text-align: center;
        }
        .no-width-box{
            display: inline-block;
        }
    

    3.运用脱离文档流的方式，先给父元素设置position:relative;和left:50%;相当于把父元素整个移动百分五十%，但是对于子元素而已，他的整个应该是在父元素的中分线右边，这个时候对子元素设置rposition:relative;和left:-50%;就可以居中了。这里需要注意一点是relative 设置定位是不会脱离文档流的，他本身位置并没有变，可以理解视觉上的变化，这种情况下很可能会影响到别的元素，通过设置父元素float:left;来解决.
    例子：
    html，我一样用上面的html代码，改下css:

    <div class="block-out-div">
        <div class="no-width-box">
            宽度不确定
        </div>
    </div>
    

    css:

        .block-out-div
        {
            height: 100px;
            background: gold;
            border: 1px solid black;
            float: left;
            position: relative;
            left: 50%;
        }
        .no-width-box{
            position: relative;
            left: -50%;
        }  display: inline-block;
    

    这种方式需要注意的是父元素已经脱离了文档流，已经脱离了文档流。

垂直居中

• 单行文本
  这种情况不管子元素是内联还是块状，只要父元素高度确定，设置height的值和line-height值相同就可以垂直居中.
  例子:
  html:

  <div class="out-div">
    hello world
  </div>
  

  css:

  .out-div{
            height: 100px;
            background: blueviolet;
            border:1px solid black;
            line-height: 100px;
        }
  

• 多行文本
  对于有多个元素需要居中的情况，有几种解决方案:
  1.table-cell,套上table标签，包括tr,td,设置table高度和父元素高度一样即可
  html:

   <div class="block-out-div">
    <table>
        <tr>
            <td>
                <div>
                    宽度不确定
                </div>
                <div>
                    宽度不确定
                </div>
            </td>
        </tr>
    </table>
  </div>
  

  css:

   table{
            height: 100px;
    }
    .block-out-div
    {
        height: 100px;
        border: 1px solid black;
    }
  

  这种方式原理是利用vertical-align:middle;这个属性设置对table类的标签的子元素居中，也就是display:table-cell的元素有效;当然也可以显示设置别的元素为table-cell,而且默认的table-cell元素，vertical-align为middle，所以，只要设置了display就行了。
  还有别的方式：比如可以通过设置position属性等.

h5 弹性盒子布局中

这个时候用flex,实现水平垂直居中变得很容易.
例子:

<div class="contianer">
    <div class="child">
        flex
    </div>
</div>

css:

.contianer{
            height: 100px;
            display: flex;
            justify-content: center;  //水平居中
            align-items: center;    //垂直居中
        }

​