【前端学习】CSS常用水平居中方法记录

CSS常用水平居中方法记录

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

1. 通过子元素margin属性来实现水平居中

    .container{
      width: 500px;
      height: 200px;
      background-color: #0ff;
    }
    .container .box{
      width: 100px;
      height: 100px;
      margin: 0 auto;/*设置居中*/
      background:#00f;
    }

说明:

块级元素被块级元素包裹时，通常满足下面等式

margin-left + border-left + padding-left +width+padding-right+border-right+margin-right = 包含块的内容宽度

在宽度(width属性)没有设置具体值的时候，包含块通常会被子元素占满

在宽度(width属性)设置了具体值的时候，包含块空的部分会被子元素的margin占满

而当左右margin都设置为auto时，就能实现居中

2.通过给父元素设置text-align属性居中，子元素改为行内块元素来实现水平居中

    .container{
      width: 500px;
      height: 200px;
      text-align: center;/*设置其内部行内元素的布局方式为居中*/
      background-color: #0ff;
    }
    .container .box{
      width: 100px;
      height: 100px;
      display: inline-block;/*设置为行内块元素*/
      background-color: #00f;
    }

说明: 行内元素可以通过其包含块的text-align属性来进行布局

3.通过给子元素margin-left属性设置为50%，transform的translate函数参数为-50%来实现水平居中

    .container{
      width: 500px;
      height: 200px;
      background-color: #0ff;
    }
    .container .box{
      width: 100px;
      height: 100px;
      margin-left: 50%;/*相当于向右移动父元素宽度的50%*/
      transform: translate(-50%);/*向左移动自身边框的50%*/
      background-color: #00f;
    }

说明: margin属性的百分比是相对于包含块的宽度来确定的，而translate函数的百分比是相对于自身边框大小来确定的，所以这边居中相当于是把容器内的box先向右移动了容器宽度的50%，再向左移动自身边框的50%来实现居中的

4.通过父元素flex布局justify-content属性来设置居中

    .container {
      width: 500px;
      height: 200px;
      background-color: #0ff;
      display: flex;/*开启flex布局*/
      justify-content: center;/*设置主轴元素居中*/
    }
    .container .box{
      width: 100px;
      height: 100px;
      background-color: #00f;
    }

说明: flex布局中可以justify-content属性来设置主轴的元素布局