参考链接

CSS设置居中的方案总结-超全

MDN: background-clip

CSS居中

行内元素

HTML

  1. <div class="parent">
  2.     <span class="child">child</span>
  3. </div>

CSS

  1. .parent {
  2.     /*垂直居中 height = line height*/
  3.     height: 200px;
  4.     line-height: 200px;
  5.     /*水平居中*/
  6.     text-align: center;
  7. }
  8. .child {
  9.     width: 100px;
  10.     border: 1px solid blue;
  11. }

或

  1. .parent {
  2.     /*垂直居中*/
  3.     display: table-cell;
  4.     vertical-align: middle;
  5. }

块级元素

HTML

  1. <div class="parent">
  2.     <div class="child">child</div>
  3. </div>

CSS

  1. .parent {
  2.     height: 500px;
  3.     width: 500px;
  4.     border: 1px solid orangered;
  5. }
  6. .child {
  7.     width: 80px;
  8.     height: 80px;
  9.     background: lightskyblue;
  10. }

绝对定位 0 + margin: auto;

  1. .parent {
  2.     position: relative;
  3. }
  4. .child {
  5.     position: absolute;
  6.     /*水平居中*/
  7.     left: 0;
  8.     right: 0;
  9.     /*垂直居中*/
  10.     top: 0;
  11.     bottom: 0;
  12.     margin: auto;
  13. }

绝对定位 50% + margin-top/calc（需要提前知道尺寸）

  1. .parent {
  2.     position: relative;
  3. }
  4. .child {
  5.     position: absolute;
  6.     left: 50%;
  7.     top: 50%;
  8.     margin-top: -40px;
  9.     margin-left: -40px;
  10.     /*left: calc(50% - 40px);*/
  11.     /*top: calc(50% - 40px);*/
  12. }

绝对定位 50% + transform 50%

  1. .parent {
  2.     position: relative;
  3. }
  4. .child {
  5.     position: absolute;
  6.     left: 50%;
  7.     top: 50%;
  8.     transform: translate(-50%, -50%);
  9. }

display: table-cell + vertical-align: middle;

  1. .parent {
  2.     display: table-cell; /*表现为单元格 行内块*/
  3.     vertical-align: middle;
  4. }

CSS 居中 - 图1

  1. .parent {
  2.     display: table;
  3. }
  4. .child {
  5.     display: table-cell;
  6.     vertical-align: middle;
  7. }

CSS 居中 - 图2

伪元素 + inline-block + vertical-align: middle;

  1. .child{
  2.     display: inline-block; /*行内块*/
  3.     vertical-align: middle;
  4. }
  5. .parent::before{ /*after也可*/
  6.     content:'';
  7.     height: 100%;
  8.     margin: 0;
  9.     display: inline-block; /*行内块*/
  10.     vertical-align: middle;
  11. }

HTML

  1. <div class="parent"><div class="child">child</div></div>
  3. <div class="parent">
  4.     <div class="child">child</div>
  5. </div>

行内元素换行产生空格。

background-clip + padding

MDN: background-clip

background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

  1. .parent {
  2.     position: relative;
  3. }
  4. .child {
  5.     padding: calc((100% - 80px) / 2);
  6.     background-clip: content-box;
  7. }

flex

  1. .parent {
  2.     display: flex;
  3.     align-items: center;
  4. }

grid

例一

  1. .parent {
  2.     display: grid;
  3. }
  4. .child {
  5.     align-self: center;
  6. }

CSS 居中 - 图3

  1. .parent {
  2.     display: grid;
  3.     align-items: center;
  4. }

CSS 居中 - 图4

  1. .parent {
  2.     display: grid;
  3.     align-content: center;
  4. }

CSS 居中 - 图5

例二

HTML

  1. <div class='content'></div>

CSS

  1. html, body{
  2.     height: 100%;
  3.     margin: 0;
  4.     padding: 0;
  5. }
  6. body {
  7.     display: grid;
  8.     /*未设置行高和列高 默认以整个body为一个项目 即容器大小与项目大小相同*/
  10.     /*未设置行高和列高 整个内容区域收缩为.content 且在容器中居中*/
  11.     align-content: center;
  12.     justify-content: center;
  14.     /*所有项目内部居中*/
  15.     align-items: center;
  16.     justify-items: center;
  17. }
  18. .content {
  19.     /*该项目内部居中（佳）*/
  20.     justify-self: center;
  21.     align-self: center;
  23.     width: 300px;
  24.     height: 300px;
  25.     background: orange;
  26. }