【Effective Web】常见的css居中方式

CSS居中方式

水平居中

text-align:center

适用范围：容器中都是行内元素
缺点：容器内所有元素都会居中，如果是文本描述需要左对齐，需要增加text-align:left覆盖

margin: 0 auto

适用范围：容器宽度固定。子元素宽度固定
缺点：对上下居中不适用

垂直居中

借助table-cell的垂直居中

给容器加上

{
    display: table-cell;
    vertical-align: middle;
}

缺点：margin属性失效

相对定位

父相子绝，原理是子元素相对父容器先向右向下偏移父容器的50%，再向左向上偏移子元素的50%
父容器position属性为relative，子元素加上以下样式

{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
}

适用范围：父子元素宽度高度固定，且子元素只有一个
缺点：如果子元素是文本，可能会导致换行

flex布局

容器加上

{
    display: flex;
    align-items: center;
    justify-content: center;
}

行内元素的垂直居中

html如下:

    

      
      湖泊
    

改变元素的居中方式，设置行高与容器高度一致

    img,
    span {
      vertical-align: middle;
      line-height: 500px;
    }

缺点：需要改变行高

多行文本的垂直居中

给文本增加span，设置span为inline-block,容器本身height与line-height相等

.container {
    height: 500px;
    line-height: 500px;
}
  .container {
    span {
      display: inline-block;
      line-height: normal;
      vertical-align: middle;
      margin: 0 20px;
    }
  }