说说各种居中

首页 - Web Design/2017-06-23
标签:   居中  各种
单行居中
    div{
        height: 26px;
        line-height: 26px;
        overflow: hidden;
        text-align:center;
    }

1. 同时支持块级和内联极元素
2. 只能支持单行垂直居中，并且不支持标签
多行居中
div{
    padding: 10px 0;
     text-align:center;
}

1. 同时支持块级和内联极元素
2. 支持非文本标签，但不能设定容器的高度
绝对定位居中
    div{
        margin: auto;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        /**可以设定高度、宽度**/
    }

1.毫无疑问，绝对定位居中是本人最喜欢、使用次数最多的居中方式。通过设定position为absolute，将使div脱离文档流，left、top、right、bottom设置为0，使目标盒填充其父元素的所有可用空间，父元素一般为body，或者position设置为relative的容器。设置高度或宽度后，margin： auto会促使该块在水平方向和垂直方向居中。
2.宽度高度支持百分比%属性值和min-/max-属性，并且必须显式生命高度
负外边距居中
div{
    width:100px;
    height:100px;
    padding:20px;
    position:absolute;
    top:50%;
    left:50%;
    /**重点：需要明确知道高度和宽度**/
    margin-left: -60px;//(width+padding)/2
    margin-top:-60px;//(height+padding)/2
}

1.使用absolute定位，距离左边50%，上边50%，再通过设置margin为负值，扣去该块本身占有的宽高。另外，需要明确指定宽度和高度！
变形居中
div{
    width: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    /**重点:向上偏移本身高度和宽度的一半**/
    transform: translate(-50%,-50%);  
}

1.通过translate设置块水平和垂直方向各移动自身高度宽度的50%距离。
2.浏览器需支持CSS3
单元格居中
div{
    display: table-cell;
    height: 300px;
    vertical-align: middle;
    text-align: center;
}

1.通过表格单元格来实现居中也是一种广泛使用的方式，这也是早期web使用table来布局的一个主要原因。另外，使用单元格来实现垂直居中可以支持多元素同时居中！！！
Flexbox
 <div class="container">
    <div class="child">
      CSS3非常简单的居中方式！
    </div>
  </div>

  .container {
      display: flex;
      height: 300px;
    }
    .child {
        margin: auto;
    }

1.Flexbox是CSS3新增布局属性，不但可以非常简单地实现居中布局，在实现其他布局方式时也带来了很大的帮助，比如多栏布局。