CSS居中指南

CSS居中指南

1 水平居中 horizontally

1.1 内联元素 inline or inline-* elements

在块级父容器中让内联元素水平居中，只需设置 text-align: center;

<div class="inline-parent"><span class="inline-horizon-center">inline element within block-level parent element</span>
</div>

.inline-parent {text-align: center;
}

这种方法可以让 inline/inline-block/inline-table/inline-flex 等类型的元素实现居中.

1.2 块级元素 block level elements

1.2.1 单个块级元素 single block level element

让单个块级元素水平居中的方法：先设置块级元素的 width，赋予一个宽度；然后设置块级元素的 margin-left: auto 和 margin-right: auto

<main class="block-parent"><div class="block-horizon-center">I am a block level element and am centered.</div>
</main >

.block-horizon-center {width: 200px;margin-left: auto;margin-right: auto;/* U can also >.html<do this */margin: 0 auto;
}

无论父级容器和块级元素的宽度如何变化，都不会影响块级元素的水平居中效果

1.2.2 多个块级元素 more than one block level element

如果要让多个块级元素在同一水平线上居中，那么可以修改它们的 display: inline-block; 或者父级容器的 display: flex;

<main class="inline-block-horizon-center"><div>I'm an element that is block-like with my siblings and we're centered in a row.</div><div>I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.</div><div>I'm an element that is block-like with my siblings and we're centered in a row.</div>
</main><main class="flex-horizon-center"><div>I'm an element that is block-like with my siblings and we're centered in a row.</div><div>I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.</div><div>I'm an element that is block-like with my siblings and we're centered in a row.>.html</div>
</main>

main div {max-width: 125px;
}
.inline-block-horizon-center {text-align: center;
}
.inline-block-horizon-center div {display: inline-block;/* U may like do this although it's not necessary */vertical-align: middle/top;
}
.flex-horizon-center {display: flex;justify-content: center;
}

如果想让多个块级元素垂直堆栈的水平对齐，依然可以通过设置 margin-left: auto和 margin-right: auto

main div {margin-left: auto;margin-right: auto;/* U can also do this */margin: 0 auto;
}
main div:nth-child(1) {width: 200px;
}
main div:nth-child(2) {width: 400px;
}
main div:nth-child(3) {width: >.html<125px;
}

2 垂直居中 vertically

2.1 内联元素 inline or inline-* elements

2.1.1 单行 single line

• 方法1：设置内联元素的块级父容器的 height 和 line-height 值相等

  <div class="single-inline-parent">
  I'm a centered single line.
  </div>

  .single-inline-parent {
  height: 30px;
  line-height: 30px;
  white-space: nowrap; /* 强制不换行 */
  overflow: hidden; /* 文本溢出时隐藏 */
  text-overflow: ellipsis; /* 溢出内容为省略号 */
  }

• 方法2：对于单行的内联元素，也可以添加等值的 padding-top 和 padding-bottom 实现垂直居中

  <main>
  <span class="single-inline-vertical-center">We're</span>
  <span class="single-inline-vertical-center">Centered</span>
  <span class="single-inline-vertical-center">Bits of</span>
  <span class="single-inline-vertical-center">Text</span>
  </main>

  main span {
  padding-top: 30px;
  padding-bottom: 30px;
  /* U can also do this */
  padding: 30px 10px;
  }

2.1.2 多行 multiple lines

2.1.2.1 多行不定高

• 方法1：对于多行的内联元素，也可以添加等值的 padding-top 和 padding-bottom 实现垂直居中

  <div>
  <span class="multi-line-vertical-center">I'm vertically centered multiple lines of text.I'm vertically centered multiple lines of text.I'm vertically centered multiple lines of text.I'm vertically centered multiple lines of text.
  </span>
  </div>

  .multi-line-vertical-center {
  padding-top: 30px;
  padding-bottom: 30px;
  /* U can also do this */
  padding: 30px 10px;
  overflow: hidden;
  }

• 方法2：使用 flexbox 实现垂直居中，因为对于父级容器为 display: flex 的元素来说，它的每一个子元素都是垂直居中的

  <div class="flex-center">
  <p>I'm vertically centered multiple lines of text in>.html< a flexbox container.</p>
  </div>

  .flex-center {
  display: flex;
  justify-content: center;
  width: 240px;
  }

• 方法3：幽灵元素(ghost element) 的非常规解决方式：在垂直居中的元素上 添加伪元素，设置伪元素的 height 等于父级容器的 height，然后为文本添加 vertical-align: middle;，即可实现垂直居中

  <div class="ghost-center">
  <p>I'm vertically centered multiple lines of text in a container. Centered with a ghost pseudo element</p>
  </div>

  .ghost-center {
  position: relative;
  }
  .ghost-center::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: null;
  vertical-align: middle;
  }
  .ghost-center p {
  display: inline-block;
  vertical-align: middle;
  /* if this don't work, maybe U should set width like width: 100px; */
  }

2.1.2.2 多行定高

• 方法1：使用 flexbox 实现垂直居中，因为对于父级容器为 display: flex 的元素来说，它的每一个子元素都是垂直居中的

  <div class="flex-center">
  <p>I'm vertically centered multiple lines of text in a flexbox container.</p>
  </div>

  .flex-center {
  display: flex;
  justify-content: center;
  flex-direction: column; /* 固定高度必须设置>.html<flex-direction */
  width: 240px;
  height: 200px;
  }

• 方法2：为文本设置一个类似 table-cell 的父级容器，然后使用 vertical-align 实现垂直居中 NOTE: IE8- 版本无效

  <div class="center-table">
  <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
  </div>

  .center-table {
  display: table;
  width: 240px;
  height: 250px;
  }
  .center-table p {
  display: table-cell;
  vertical-align: middle;
  }

2.2 块级元素 block level elements

2.2.1 已知元素的高度 know the height of the element

先让元素 绝对定位 到父容器的中心点，然后设置 负向margin，负值的大小为其自身高度的一半 NOTE: 如果父元素设置了padding，则计算 负向margin 时，负值的大小为：其自身高度的一半再加上父元素的内边距

<main>  <div>I'm a block-level element with a fixed height, centered vertically within my parent.</div>
</main>

main {position: relative;
}
main div {position: absolute;top: 50%;height: 100px;margin-top: -50px;
}

2.2.2 未知元素的高度 unknow the height of the element

如果我们不知道块级元素的高度，那么就需要先将元素定位到容器的 中心位置，然后使用 transform 的 translate 属性，将元素的中心和父容器的 中心重合，从而实现垂直居中

<main><div>I'm a block-level element with an unknown height, centered vertically within my parent.</div>
</main>

main {position: relative;
}
main div {position: absolute;top: 50%;transform: translateY(-50%);
}

2.2.3 使用flexbox

<main><div>I'm a block-level element with an unknown height, centered vertically within my parent.</div>
</main>

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

3 水平且垂直居中 horizontally & vertically

3.1 元素的宽高固定 fixed width and height

设定父容器为相对定位，设定子元素为绝对定位，将子元素定位到父容器的中心点，然后使用 负向margin ，margin 的值为其自身宽高的一半 NOTE: 如果父元素设置了 padding，则计算 负向margin 时，值为：其自身宽度/高度的一半再加上父元素的内边距

<main><div>I'm a block-level element with fixed height and width, centered vertically within my parent.</div>
</main>

main {position: relative;
}
main div {position: absolute;top: 50%;left: 50%;width: 200px;height: 100px;margin: -50px 0 0 -100px;/* U can also do this */margin-top: -50px;margin-left: -100px;
}

3.2 元素的宽高不固定 unknown width and height

设定父容器为相对定位，设定子元素为绝对定位，将子元素定位到父容器的中心点，不同的是，接下来需要使用transform: translate(-50%, -50%); 实现垂直居中

<main><div>I'm a block-level element with unknown height and width, centered vertically within my parent.</div>
</main>

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

使用 transform 有一个缺陷，就是当计算结果含有小数时（比如 0.5），会让整个元素看起来是模糊的，一种解决方案就是设置父级元素的 transform-style: preserve-3d;

main {-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;
}
main div {position: relative;top: 50%;transform: translateY(-50%);
}

3.3 使用flexbox

<main><div>I'm a block-level element with unknown width and height, centered vertically within my parent.</div>
</main>

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