CSS 居中布局

Question

类型：

• 水平
  • 需要居中 inline 或者 inline-* 元素（如文字或者链接）？
  • 需要居中 block 类的元素？
  • 需要居中多个 block 元素？
• 垂直
  • 需要居中 inline 或者 inline-* 元素（如文字或者链接）？
  • 需要居中 block 类的元素？
• 既水平又垂直
  • 固定宽高
  • 不固定宽高
  • 使用 flexbox

水平居中

1.水平居中 inline 或者 inline-* 元素

在一个 block 元素 中水平居中一个 inline ， inline-block ， inline-table 和 inline-flex 等 元素

.parent {
  text-align: center;
}

2. 水平居中 block 类的元素

在 block 元素被设定固定宽度的情况下

.child {
  width: 400px;
  margin: 0 auto;
}

3. 水平居中多个 block 类的元素

1. 通过 inline-block 实现

   .parent {
     text-align: center;
   }
   .child {
     display: inline-block;
     text-align: left;
   }
   

2. 通过 flexbox 实现

   .parent {
     display: flex;
     justify-content: center;
   }
   

3. 对于开启定位的元素，可以通过 left 属性 和 margin 实现。

   .child {
     position: relative;
     left: 50%;
     /* margin-left 为 负的宽度的一半 */
     margin-left: -150px;
   }
   

4. 当元素开启决定定位或者固定定位时， left 属性和 right 属性一起设置就会拉伸元素的宽度，在配合 width 属性与 margin 属性就可以实现水平居中。

   .parent {
     position: relative;
     height: 300px;
   }
   
   .child {
     position: absolute;
     /* 水平拉满屏幕 */
     left: 0;
     right: 0;
     width: 300px;
     /* 拉满屏幕之后设置宽度，最后通过 margin 实现水平居中 */
     margin: auto;
   }
   

5. 当元素开启决定定位或者固定定位时， left 属性和 transform 属性即可实现水平居中。

   .parent {
     position: relative;
   }
   
   .child {
     position: absolute;
     /* 该方法类似于 left 于 -margin 的用法，但是该方法不需要手动计算宽度。 */
     left: 50%;
     transform: translateX(-50%);
   }
   

垂直居中

1. 垂直居中 inline 或者 inline-* 元素

1. 父元素的 dispaly 设置为 table ，子元素的 dispaly 设置为 table-cell ，然后设置 vertical-align

   .parent {
     display: table;
     width: 200px;
     height: 400px;
   }
   .child {
     display: table-cell;
     vertical-align: middle;
   }
   

2. 使用 flexbox

   .parent {
     display: flex;
     /* 方法一 */
     /* align-items: center; */
   }
   
   .child {
     /* 方法二 */
     margin: auto;
   }
   

3. 使用 Grid 布局

   .parent {
     display: grid;
     /* 方法一 */
     /* align-items: center; */
     /* 方法二 */
     /* align-content: center; */
   }
   
   .child {
     /* 方法三 */
     /* margin: auto; */
     /* 方法四 */
     align-self: center;
   }
   

4. 用伪元素 ::before 撑开高度 ，文字垂直居中。

   .parent {
     position: relative;
   }
   .parent::before {
     content: " ";
     display: inline-block;
     height: 100%;
     width: 1%;
     vertical-align: middle;
   }
   .child {
     display: inline-block;
     vertical-align: middle;
   }
   

5. 子元素使用 display: inline-block, vertical-align: middle; 并让父元素行高等同于高度。

   .parent {
     /* 为父级容器设置行高 */
     line-height: 500px;
   }
   
   .child {
     /* 将子级元素设置为 inline-block 元素 */
     display: inline-block;
     /* 通过 vertical-align: middle; 实现居中 */
     vertical-align: middle;
   }
   

1. 通过 top: 50%; margin-top: 等于负的高度的一半就可以实现垂直居中。

   .parent {
     position: relative;
   }
   
   .child {
     position: absolute;
     top: 50%;
     /* margin-top: 等于负高度的一半 */
     margin-top: -150px;
   }
   

1. top 和 bottom 将子元素拉伸至 100%，设置指定的高度，通过 margin:auto;即可实现垂直居中。

   .parent {
     position: relative;
   }
   
   .child {
     height: 300px;
     position: absolute;
     /* 垂直拉满 */
     top: 0;
     bottom: 0;
     /* margin: auto 即可实现 */
     margin: auto;
   }
   

1. 使用 top 配合 tansform

   .parent {
     position: relative;
   }
   
   .child {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
   }
   

2. 垂直居中 block 类的元素

1. 已知元素高度

   .parent {
     position: relative;
   }
   .child {
     position: absolute;
     top: 50%;
     height: 100px;
     margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
   }
   

1. 未知元素高度

   .parent {
     position: relative;
   }
   .child {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
   }
   

1. 使用 flexbox

   .parent {
     display: flex;
     flex-direction: column;
     justify-content: center;
   }
   

水平垂直居中

1. 固定宽高

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

#block 子元素定宽 + 父元素高度由子元素决定 
.parent16 {

}
.child16 {
    font-size: 32px;
    width: 150px;
    /* margin: auto; */
    /* padding: 50px 0; */
    margin: 50px auto;
}

2.不固定宽高

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

.parent {
  position: relative;
}
.child {
  position: absolute;
  /* 3. 设置该元素的偏移量，值为 50%减去宽度/高度的一半 */
  left: calc(50% - 150px);
  top: calc(50% - 150px);
}

.parent {
  /* 1. 使子元素相对于本元素定位 */
  position: relative;
}
.child {
  /* 2. 开启绝对定位 */
  position: absolute;
  /* 3. 设置该元素的偏移量，值为 50% */
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -150px;
}

.parent {
  /* 1. 设置行高等于容器高度 */
  line-height: 500px;
  text-align: center;
}
/*
.parent::before {
    content: "";
    line-height: 500px;
    font-size: 0;
}
*/
.child {
  display: inline-block;
  vertical-align: middle;
}

.parent {
  /* 1. 使子元素相对于本元素定位 */
  position: relative;
}
.child {
  /* 2. 开启绝对定位 */
  position: absolute;
  /* 3. 将子元素拉满整个容器 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 4. 通过 margin:auto 实现水平垂直居中 */
  margin: auto;
}

# 这个方法受默认排版影响,也是有兼容问题的
.parent15 {
    writing-mode: vertical-lr;
    text-align: center;
}
.child15 {
    font-size: 32px;
    width: 100%;
    writing-mode: horizontal-tb;
    /* display: inline; */
    display: inline-block;
}

3.使用 flexbox

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

.parent6 {
    display: flex;
}
.child6 {
    margin: auto;
}

4.使用 grid 网格布局

.parent5 {
    display: grid;  
    justify-content: center;
    align-items: center;
}
.parent5{
    display:grid;
    place-items:center; /*place-items 是将 justify-items 和 align-items 结合在一起的简写属性 当使用 place-items 时，它将应用于网格中的每个单元格，也就是说单元格的内容都会居中。*/
}

.parent7 {
    display: grid;
}
.child7 { <!--子元素不定宽高（居中属性设置在子元素上)-->
    justify-self: center;
    align-self: center;
}

body, html {
  height: 100%;
  display: grid;
}
span { /* thing to center */
  margin: auto;
}

5.table-cell 布局

<style>
.parent12 {
    /* width 设置百分比会失效,如果宽度不设置就由子元素的内容宽度决定 */
    width: 1000px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
</style>

6.正方形十字居中

<style>
    .parent18 {
        border: 1px solid #000;
        background-color: rgb(214, 120, 52);
        width: 20%;
        position: relative;
    }
    .parent18::before {
        content: "";
        display: block;
        width: 0;
        height: 0;
        padding: 50% 0;
    }

    .child18::before, .child18::after {
        content: "";
        display: block;
        position: absolute;
        background-color: chartreuse;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .child18::before {
        width: 50%;
        height: 5%;
    }
    .child18::after {
        height: 50%;
        width: 5%;
    }
</style>
<div class="parent18">
    <div class="child18"></div>
</div>

7. Grid 布局

.parent {
  /* 1. 元素设置为 Grid 元素 */
  display: grid;
  /* 通过 items 属性实现*/
  /* align-items: center; */
  /* justify-items: center; */
  /* items 的缩写 */
  /* place-items: center; */

  /* 或者通过 content 属性 */
  /* align-content: center; */
  /* justify-content: center; */
  /* content 的缩写 */
  /* place-content: center; */
}
.child {
  /* 或者通过 margin auto 实现 */
  /* margin: auto; */
  /* 或者通过 self 属性 */
  /* align-self: center;
  justify-self: center; */
  /* self 的缩写 */
  place-self: center;
}