水平垂直居中方法

2016-07-07

水平垂直居中在工作中经常遇见，学习了下CSS布局，顺便总结一些水平垂直居中布局的方法。

少年锦时

利用子元素margin实现居中时要注意:

水平格式化有7个相关属性：margin-left、border-left、padding-left、width、padding-right、border-right、margin-right
垂直格式化也有7个相关属性:margin-top、border-top、padding-top、height、padding-bottom、border-bottom、margin-bottom
在正常流中一个块元素的margin-top和margin-bottom设置为auto时，会自动计算为0；
而将会计元素的margin-left和margin-right设置为auto时，会自动计算为相等的长度；
所以对于定宽的块级元素margin-left:auto;margin-right：auto;可使元素水平居中。

一、单行文本垂直居中

利用line-height + text-align

1
2
3

<div class="container">
  <span>少年锦时</span>
</div>

.container{
  border: 1px solid #ff6633;
  color:#ff6633;
  width: 300px;
  height:200px;
  text-align:center;
}
span{
   line-height:200px;
}

二、padding填充

计算父元素与子元素宽高差，设置父元素padding
paddingLeft = paddingRight = (parent.width - child.width)/2
paddingTop = paddingBottom = (parent.height - child.height)/2

1
2
3

<div class="container">
    <div class="content"></div>
</div>

*{
  box-sizing: border-box;
 }
.container{
  border: 1px solid #ff6633;
  color:#fff;
  width: 300px;
  height:200px;
  padding: 50px 0;
}
.content{
   width: 100px;
   height: 100px;
   background-color:#ff6633;
}

三、margin填充

*{
  box-sizing: border-box;
 }
.container{
  border: 1px solid #ff6633;
  color:#fff;
  width: 300px;
  height:200px;
}
.content{
   width: 100px;
   height: 100px;
   background-color:#ff6633;
   margin: 50px 100px;
}

四、absolute布局的水平垂直居中

结合position和transform水平移动

.container{
  position: relative;
  border: 1px solid #ff6633;
  color:#fff;
  width: 300px;
  height:200px;
  }
.content{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   -webkit-transform: translate(-50%,-50%);
   width: 100px;
   height: 100px;
   background-color:#ff6633;           
}

五、IFC布局上下文的水平垂直居中

主要是垂直居中使用vertical-align属性

<div class="container">
    <div class="hidden"></div>
    <div class="content"></div>
</div>

.container{
  border: 1px solid #ff6633;
  color:#fff;
  height:200px;
  text-align: center;
}
.hidden{
  width: 0;
  height: inherit;
}
.hidden,.content{
  display: inline-block;
  vertical-align: middle;
}
.content{
   width: 100px;
   height: 100px;
   background-color:#ff6633;
}

六、table布局上下文下的水平垂直居中

将div模拟成表格,利用单元格的vertical-align属性垂直居中，水平居中可以用text-align和margin：auto

<div class="container">
  <div class="row">
    <div class="col"></div>
  </div>
</div>

.container{
    display: table;
    width: 400px;
    height: 200px;
    border: 1px solid #ff6633;
    color:#fff;
    }
.row{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.col{
   display: inline-block;
   width: 100px;
   height: 100px;
   background-color:#ff6633;
}

七、FFC布局上下文下的水平垂直居中

利用flex布局的justify-content和align-items

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 200px;
    border: 1px solid #ff6633;
    color:#fff;
}
.content{
    width: 100px;
    height: 100px;
    background-color:#ff6633;
}

上面的这些方法按css布局分个类能加深一些理解

C^.Y.^F