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;    //垂直居中
        }

posted @ 2017-01-02 14:34 Wyshon 阅读(312) 评论(0) 编辑收藏举报

刷新页面返回顶部

css 水平垂直居中总结

水平居中

子元素是内联元素

子元素是块状元素

垂直居中

h5 弹性盒子布局中