Centering in CSS - A Complete Guide

CSS

发布日期: 2021-03-02

Centering in CSS:A Complete Guide | CSS-Tricks

Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn’t that it’s difficult to do, but in that there so many different ways of doing it, depending on the situation, it’s hard to know which to reach for.

So let’s make it a decision tree and hopefully make it easier.

I need to center…

Horizontally

You can center inline elements horizontally, within a block-level parent element, with just:

`inline-*` + `text-align:center;`

<div>
  <p>“要让群众讲话，哪怕是骂自己的话”
  </p>
<div>

body {
  background:#f06d06;
}
div {
  text-align:center;
  background:white;
}

This will work for inline, inline-block, inline-table, inline-flex, etc.

The text-align CSS property sets the horizontal alignment of a block element or table-cell box. This means it works like vertical-align but in the horizontal direction.

text-align:center; The inline contents are centered within the line box.

父元素设置为 text-align:center; 会使父元素内的文本和行内元素水平居中，但是对块级元素无效。

缺点：为了水平居中元素，使文本也水平居中了，因此可能需要重置文本的 text-align.

优点：不需要固定居中元素的宽。

`margin:auto`

You can center a block-level element by giving it margin-left and margin-right of auto (and it has a set width, otherwise it would be full width and wouldn’t need centering). That’s often done with shorthand like this:

<div class="parent">
  <div class="center">“要让群众讲话，哪怕是骂自己的话”1962 年 1 月 30 日，毛泽东在人民大会堂主持扩大的中央工作会议全体会议，并作长篇讲话。中心是讲民主集中制问题，突出强调在党内外发扬民主的重要性。他说：“要真正把问题敞开，让群众讲话，哪怕是骂自己的话，也要让人家讲。骂的结果，无非是自己倒台，不能做这项工作了，降到下级机关去做工作，或者调到别的地方去做工作。现在有些同志，很怕群众开展讨论，怕他们提出同领导机关、领导者不同的意见。一讨论问题，就压抑群众的积极性，不许人家讲话。”(《毛泽东年谱》第五卷 77 页</div>
</div>

body {
  background:#f06d06;
}
.parent {
  background:white;
  padding:10px;
}
.center {
  margin:0 auto;
  width:300px;
  background:black;
  color:white;
}

This will work no matter what the width of the block level element you’re centering, or the parent.

The margin CSS property sets the margin area on all four sides of an element.

元素被设置成块级后，会独占一行，如果其宽度没有占满横向空间，此时将该元素本身设置 margin:auto; 那么剩余的空间就分配给 margin, 并且左右均分，所以就实现了水平居中。

Note that you can’t float an element to the center. There is a trick though.(https://css-tricks.com/float-center/)

`display:flex;` + `flex-direction:column;` + `align-items:center;`

通过 CSS Flexible Box Layout 实现水平居中的原理是父元素 display:flex; + flex-direction:column; + align-items:center;

<div class="parent">
  <div class="children">你们习惯把人群分成罪犯和非罪犯，就是所谓的好人和坏人，并且由此延伸出一些高尚啊、卑微之类的概念，但是我要告诉你，其实一切都是机会而已，穷乡僻壤的犯罪率低，不意味着那儿的人就高尚，因为他们没有选择，没有选择就不会有痛苦。</div>
</div>

body {
  background:#f06d06;
}
.parent {
  background:white;
  margin:10px 0;
  padding:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.children {
  background:black;
  color:white;
  padding:10px;
  width:300px;
  margin:10px;
}

`display:flex;` + `flex-direction:column;` + `align-self:center;`

通过 CSS Flexible Box Layout 实现水平居中的原理是父元素 display:flex; + flex-direction:column;而子元素 align-self:center;

<div class="parent">
  <div class="children">你们习惯把人群分成罪犯和非罪犯，就是所谓的好人和坏人，并且由此延伸出一些高尚啊、卑微之类的概念，但是我要告诉你，其实一切都是机会而已，穷乡僻壤的犯罪率低，不意味着那儿的人就高尚，因为他们没有选择，没有选择就不会有痛苦。</div>
</div>

body {
  background:#f06d06;
}
.parent {
  background:white;
  margin:10px 0;
  padding:10px;
  display:flex;
  flex-direction:column;
}
.children {
  background:black;
  color:white;
  padding:10px;
  width:300px;
  margin:10px;
  align-self:center;
}

`display:flex;` + `justify-content:center;`

通过 CSS Flexible Box Layout 实现水平居中的原理是父元素 display:flex; + justify-content:center;

<div class="parent">
  <div class="children">你们习惯把人群分成罪犯和非罪犯，就是所谓的好人和坏人，并且由此延伸出一些高尚啊、卑微之类的概念，但是我要告诉你，其实一切都是机会而已，穷乡僻壤的犯罪率低，不意味着那儿的人就高尚，因为他们没有选择，没有选择就不会有痛苦。</div>
</div>

body {
  background:#f06d06;
}
.parent {
  background:white;
  margin:10px 0;
  padding:10px;
  display:flex;
  justify-content:center;
}
.children {
  background:black;
  color:white;
  padding:10px;
  width:300px;
  margin:10px;
}

`display:grid;` + `justify-content:center;`

通过 CSS Grid Layout 实现水平居中的原理是父元素 display:grid; + justify-content:center;

<div class="parent">
  <div class="children">你们习惯把人群分成罪犯和非罪犯，就是所谓的好人和坏人，并且由此延伸出一些高尚啊、卑微之类的概念，但是我要告诉你，其实一切都是机会而已，穷乡僻壤的犯罪率低，不意味着那儿的人就高尚，因为他们没有选择，没有选择就不会有痛苦。</div>
</div>

body {
  background:#f06d06;
}
.parent {
  background:white;
  margin:10px 0;
  padding:10px;
  display:grid;
  justify-content:center;
}
.children {
  background:black;
  color:white;
  padding:10px;
  width:300px;
  margin:10px;
}

`display:grid;` + `justify-items:center;`

通过 CSS Grid Layout 实现水平居中的原理是父元素 display:grid; + justify-items:center;

In flexbox layouts, justify-items property is ignored

<div class="parent">
  <div class="children">你们习惯把人群分成罪犯和非罪犯，就是所谓的好人和坏人，并且由此延伸出一些高尚啊、卑微之类的概念，但是我要告诉你，其实一切都是机会而已，穷乡僻壤的犯罪率低，不意味着那儿的人就高尚，因为他们没有选择，没有选择就不会有痛苦。</div>
</div>

body {
  background:#f06d06;
}
.parent {
  background:white;
  margin:10px 0;
  padding:10px;
  display:grid;
  justify-items:center;
}
.children {
  background:black;
  color:white;
  padding:10px;
  width:300px;
  margin:10px;
}

`display:grid;` + `justify-self:center;`

通过 CSS Grid Layout 实现水平居中的原理是父元素 display:grid; 子元素 justify-self:center;

<div class="parent">
  <div class="children">你们习惯把人群分成罪犯和非罪犯，就是所谓的好人和坏人，并且由此延伸出一些高尚啊、卑微之类的概念，但是我要告诉你，其实一切都是机会而已，穷乡僻壤的犯罪率低，不意味着那儿的人就高尚，因为他们没有选择，没有选择就不会有痛苦。</div>
</div>

body {
  background:#f06d06;
}
.parent {
  background:white;
  margin:10px 0;
  padding:10px;
  display:grid;
}
.children {
  background:black;
  color:white;
  padding:10px;
  width:300px;
  margin:10px;
  justify-self:center;
}

`display:table-cell` + `margin-left`

对于父元素和子元素的宽度都确定的情况，父元素 display:table-cell，子元素给剩余宽度一半的 margin-left 实现 CSS 水平居中。

<div class="parent">
  <div class="children">“要让群众讲话，哪怕是骂自己的话”1962 年 1 月 30 日，毛泽东在人民大会堂主持扩大的中央工作会议全体会议，并作长篇讲话。中心是讲民主集中制问题，突出强调在党内外发扬民主的重要性。他说：“要真正把问题敞开，让群众讲话，哪怕是骂自己的话，也要让人家讲。骂的结果，无非是自己倒台，不能做这项工作了，降到下级机关去做工作，或者调到别的地方去做工作。现在有些同志，很怕群众开展讨论，怕他们提出同领导机关、领导者不同的意见。一讨论问题，就压抑群众的积极性，不许人家讲话。”(《毛泽东年谱》第五卷 77 页</div>
</div>

.parent {
  background:#f06d06;
  padding:10px 0;
  display:table-cell;
  width:600px;
}
.children {
  padding:10px 0;
  margin-left:150px;
  width:300px;
  background:#abcdef;
}

`position:absolute` + `margin-left`

适用于父元素和子元素的宽度都确定的情况。

父元素 position:absolute，子元素给剩余宽度一半的 margin-left。

<div class="parent">
  <div class="children">“要让群众讲话，哪怕是骂自己的话”1962 年 1 月 30 日，毛泽东在人民大会堂主持扩大的中央工作会议全体会议，并作长篇讲话。中心是讲民主集中制问题，突出强调在党内外发扬民主的重要性。他说：“要真正把问题敞开，让群众讲话，哪怕是骂自己的话，也要让人家讲。骂的结果，无非是自己倒台，不能做这项工作了，降到下级机关去做工作，或者调到别的地方去做工作。现在有些同志，很怕群众开展讨论，怕他们提出同领导机关、领导者不同的意见。一讨论问题，就压抑群众的积极性，不许人家讲话。”(《毛泽东年谱》第五卷 77 页
  </div>
</div>

.parent {
  background:#f06d06;
  padding:10px 0;
  display:absolute;
  width:600px;
}
.children {
  padding:10px 0;
  margin-left:150px;
  width:300px;
  background:#abcdef;
}

`width:fit-content`

子元素宽度不确定的情况下，也能实现 CSS 水平居中。

需要注意的是，需要配合margin:0 auto; + text-align:center;使用。

<div class="parent">
  <div class="children">“要让群众讲话，哪怕是骂自己的话”
  </div>
</div>

.parent {
  background:#f06d06;
  padding:10px 0;
}
.children {
  padding:10px 0;
  background:#abcdef;
  width:fit-content;
  margin:0 auto;
  text-align:center;
}

`position:relative;` +`float:left;` + `margin-left`

给父元素样式 position:relative;，给子元素 float:left; 和 margin-left 就可以实现 CSS 水平居中。

<div class="parent">
  <div class="children">“要让群众讲话，哪怕是骂自己的话”1962 年 1 月 30 日，毛泽东在人民大会堂主持扩大的中央工作会议全体会议，并作长篇讲话。中心是讲民主集中制问题，突出强调在党内外发扬民主的重要性。他说：“要真正把问题敞开，让群众讲话，哪怕是骂自己的话，也要让人家讲。骂的结果，无非是自己倒台，不能做这项工作了，降到下级机关去做工作，或者调到别的地方去做工作。现在有些同志，很怕群众开展讨论，怕他们提出同领导机关、领导者不同的意见。一讨论问题，就压抑群众的积极性，不许人家讲话。”(《毛泽东年谱》第五卷 77 页
  </div>
</div>

.parent {
  background:#f06d06;
  padding:10px 0;
  position:relative;
  width:600px;
  height:380px;
}
.children {
  padding:10px 0;
  background:#abcdef;
  float:left;
  width:300px;
  margin-left:150px;
}

`position:absolute;` + `left:50%;` + `transform:translateX(-50%);`

未知宽度块状元素水平居中

<div class="parent">
  <div class="children">这是一个多么可怕的世界啊！他们把人分成三六九等，最高层的人，能够充分享受物质和精神的供应，然后随着层次的递减，供应就开始减少了；最低层次的人，通常他们接受的物质能量只能勉强维持他们的生活，而精神供应几乎是零，本人曾经就活在这个层面里！</div>
</div>

body {
  background:#f06d06;
}
.parent {
  background:white;
  height:280px;
  margin:20px 0;
  padding:10px;
}
.children {
  position:absolute;
  left:50%;
  background:black;
  color:white;
  padding:20px;
  transform:translateX(-50%);
}

也适用多个未知高度块状元素水平居中

Vertically

Vertical centering is a bit trickier in CSS.

上下 `padding` 相等

Sometimes inline / text elements can appear vertically centered, just because there is equal padding above and below them.

<div class="parent">
  <p>但数年来，全国范围内，到三明学习医改的考察团已有千余批次，无论是堵浪费，还是阳光年薪制，均未见落实。</p>
</div>

.parent {
  background:#f06d06;
  margin:20px 0;
  padding:50px;
}
.parent p {
  background:white;
  padding:20px;
  text-decoration:none;
}

If padding isn’t an option for some reason, and you’re trying to center some text that you know will not wrap, there is a trick were making the line-height equal to the height will center the text.

`height` 和 `line-height` 相等不换行文本素垂直居中

<div class="parent">
  <div>但是三明医改经革如何更好地推进，或许是摆在各级政府面前的新问题。</div>
</div>

.parent {
  background:#f06d06;
  margin:20px 0;
  padding:40px;
}
.parent div {
  background:white;
  height:60px;
  line-height:60px;
  white-space:nowrap;
}

white-space - CSS:Cascading Style Sheets | MDN

`display:flex;` + `justify-content:center;` + `flex-direction:column;`垂直居中

父容器设置 display:flex; + justify-content:center; + flex-direction:column;

<div class="parent">
  <div class="children">国家卫生健康委体改司司长许树强：总结三明医改的精髓，主要有以下几个方面：一是改革整体联动；二是完善医改经济政策；三是健全医院内部激励和约束机制；四是推动医疗资源下沉。三明医改从实际出发，大胆实践、勇于创新，打出了一套适合三明实际情况的医改组合拳，也为各地因地制宜推广积累了非常好的经验。</div>
</div>

.parent {
  background:#f06d06;
  display:flex;
  justify-content:center;
  flex-direction:column;
}
.children {
  background:white;
  margin:20px;
  padding:20px;
}

`display:flex;` + `align-items:center;` 垂直居中

父容器设置 display:flex; + align-items:center;

<div class="parent">
  <div class="children">国家卫生健康委体改司司长许树强：总结三明医改的精髓，主要有以下几个方面：一是改革整体联动；二是完善医改经济政策；三是健全医院内部激励和约束机制；四是推动医疗资源下沉。三明医改从实际出发，大胆实践、勇于创新，打出了一套适合三明实际情况的医改组合拳，也为各地因地制宜推广积累了非常好的经验。</div>
</div>

.parent {
  background:#f06d06;
  display:flex;
  align-items:center;
}
.children {
  background:white;
  margin:20px;
  padding:20px;
}

`display:flex;` + `align-self:center;` 垂直居中

父容器设置 display:flex; 子容器设置 align-self:center;

<div class="parent">
  <div class="children">国家卫生健康委体改司司长许树强：总结三明医改的精髓，主要有以下几个方面：一是改革整体联动；二是完善医改经济政策；三是健全医院内部激励和约束机制；四是推动医疗资源下沉。三明医改从实际出发，大胆实践、勇于创新，打出了一套适合三明实际情况的医改组合拳，也为各地因地制宜推广积累了非常好的经验。</div>
</div>

.parent {
  background:#f06d06;
  display:flex;
}
.children {
  background:white;
  margin:20px;
  padding:20px;
  align-self:center;
}

Remember that it’s only really relevant if the parent container has a fixed height (px, %, etc), which is why the container here has a height.

⊙▽⊙

If both of these techniques are out, you could employ the “ghost element” technique, in which a full-height pseudo-element is placed inside the container and the text is vertically aligned with that.

.ghost-center {
  position: relative;
}
.ghost-center::before {
  content: ' ';
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.ghost-center p {
  display: inline-block;
  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>

body {
  background:#f06d06;
}
div {
  background:white;
  height:250px;
  margin:20px;
  color:white;
  padding:20px;
}
.ghost-center {
  position:relative;
}
.ghost-center::before {
  content:" ";
  display:inline-block;
  height:100%;
  width:1%;
  vertical-align:middle;
}
.ghost-center p {
  display:inline-block;
  vertical-align:middle;
  width:190px;
  margin:0;
  padding:20px;
  background:black;
}

固定高度垂直居中

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

<div class="parent">
  <div class="children">国家卫生健康委体改司司长许树强：总结三明医改的精髓，主要有以下几个方面：一是改革整体联动；二是完善医改经济政策；三是健全医院内部激励和约束机制；四是推动医疗资源下沉。三明医改从实际出发，大胆实践、勇于创新，打出了一套适合三明实际情况的医改组合拳，也为各地因地制宜推广积累了非常好的经验。
  </div>
</div>

body {
  background:#f06d06;
}
.parent {
  background:white;
  height:300px;
  margin:20px;
  position:relative;
}
.children {
  position:absolute;
  top:50%;
  height:100px;
  margin-top:-70px;
  background:black;
  color:white;
  padding:20px;
}

未知高度垂直居中

It’s still possible to center it by nudging it up half of it’s height after bumping it down halfway:

固定高度父容器设置 position:relative;
子容器设置 position:absolute; + top:50%; + transform:translateY(-50%);

<div class="parent">
  <div class="children">国家卫生健康委体改司司长许树强：总结三明医改的精髓，主要有以下几个方面：一是改革整体联动；二是完善医改经济政策；三是健全医院内部激励和约束机制；四是推动医疗资源下沉。三明医改从实际出发，大胆实践、勇于创新，打出了一套适合三明实际情况的医改组合拳，也为各地因地制宜推广积累了非常好的经验。
  </div>
</div>

body {
  background:#f06d06;
}
.parent {
  background:white;
  height:300px;
  margin:20px;
  padding:20px;
  position:relative;
}
.children {
  position:absolute;
  top:50%; 
  left:20px;
  right:20px;
  background:black;
  color:white;
  padding:20px;
  transform:translateY(-50%);
}

Do you care if the element stretches the height of the container?

If you don’t, you just need the content inside vertically centered, using tables or CSS display to make elements into tables can do the trick.

父容器设置 display:table;
子容器设置 display:table-cell; + vertical-align:middle;

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

body {
  background:#f06d06;
}
.parent {
  background:white;
  margin:20px;
  position:relative;
  padding:20px;
  display:table;
}
.parent div {
  background:black;
  color:white;
  padding:20px;
  display:table-cell;
  vertical-align:middle;
}

`display:grid;`+ `align-items:center;`

固定高度父容器设置 display:grid;+ align-items:center;

<div class="parent">
  <div class="children">国家卫生健康委体改司司长许树强：总结三明医改的精髓，主要有以下几个方面：一是改革整体联动；二是完善医改经济政策；三是健全医院内部激励和约束机制；四是推动医疗资源下沉。三明医改从实际出发，大胆实践、勇于创新，打出了一套适合三明实际情况的医改组合拳，也为各地因地制宜推广积累了非常好的经验
  </div>
</div>

.parent {
  background:#f06d06;
  height:300px;
  margin:20px;
  display:grid;
  align-items:center;
}
.children {
  background:black;
  color:white;
  padding:20px;
  margin:20px;
}

`display:grid;`+ `align-content:center;`

固定高度父容器设置 display:grid;+ align-content:center;

<div class="parent">
  <div class="children">国家卫生健康委体改司司长许树强：总结三明医改的精髓，主要有以下几个方面：一是改革整体联动；二是完善医改经济政策；三是健全医院内部激励和约束机制；四是推动医疗资源下沉。三明医改从实际出发，大胆实践、勇于创新，打出了一套适合三明实际情况的医改组合拳，也为各地因地制宜推广积累了非常好的经验
  </div>
</div>

.parent {
  background:#f06d06;
  height:300px;
  margin:20px;
  display:grid;
  align-content:center;
}
.children {
  background:black;
  color:white;
  padding:20px;
  margin:20px;
}

`display:grid;` + `align-self:center;`

固定高度父容器设置 display:grid;
子容器设置 align-self:center;

<div class="parent">
  <div class="children">国家卫生健康委体改司司长许树强：总结三明医改的精髓，主要有以下几个方面：一是改革整体联动；二是完善医改经济政策；三是健全医院内部激励和约束机制；四是推动医疗资源下沉。三明医改从实际出发，大胆实践、勇于创新，打出了一套适合三明实际情况的医改组合拳，也为各地因地制宜推广积累了非常好的经验
  </div>
</div>

.parent {
  background:#f06d06;
  height:300px;
  margin:20px;
  display:grid;
}
.children {
  background:black;
  color:white;
  padding:20px;
  margin:20px;
  align-self:center;
}

Both Horizontally and Vertically

You can combine the techniques above in any fashion to get perfectly centered elements. But I find this generally falls into three camps:

`absolute` + 负 `margin`

Using negative margins equal to half of that width and height, after you’ve absolutely positioned it at 50% / 50% will center it with great cross browser support:

$width: 300px;
$height: 200px;

.parent {
  position: relative;
}
.children {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: $height/-2 0 0 $width/-2;
  width: $width;
  height: $height;
}

<div class="parent">
  <div class="children">得道多助，失道寡助，出自《孟子·公孙丑下》, 指站在正义方面会得到多数人的支持帮助；违背正义必然陷于孤立。文章通过对"天时"、"地利"、"人和", 并将这三者加以比较，层层递进。论证了"天时不如地利，地利不如人和"的道理。
  </div>
</div>

$width: 300px;
$height: 200px;
body {
  background: #f06d06;
}
.parent {
  background: white;
  height: 400px;
}
.children {
  background: black;
  color: white;
}
.parent {
  position: relative;
}
.children {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: $height/-2 0 0 $width/-2;
  width: $width;
  height: $height;
}

`absolute` + `margin:auto;`

.parent {
  position: relative;
}
.children {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 200px;
  height: 200px;
}

<div class="parent">
  <div class="children">得道多助，失道寡助，出自《孟子·公孙丑下》, 指站在正义方面会得到多数人的支持帮助；违背正义必然陷于孤立。文章通过对"天时"、"地利"、"人和", 并将这三者加以比较，层层递进。论证了"天时不如地利，地利不如人和"的道理。
  </div>
</div>

body {
  background:#f06d06;
}
.parent {
  background:white;
  height:400px;
}
.children {
  background:black;
  color:white;
}
.parent {
  position:relative;
}
.children {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  width:300px;
  height:200px;
}

该方案的原理是：使用了 CSS 中的定位属性 (absolute、fixed 等）后，如果 left 设置了具体值，没有设置 right 和 width, 那么就会自动计算，把剩余的空间分配给 right 和 width. 如果 left、right 和 width 都设置了具体值，并且没有占满横向空间，那么剩余空间就处于待分配状态，此时设置 margin:auto; 意味着把剩余的空间分配给 margin, 并且左右均分，所以就实现了水平居中，垂直方向同理。

副作用：left:0; right:0; 相当于 width:100%; ; top:0; bottom:0; 相当于 height:100%;

需要固定居中元素的宽高，否则其宽高会被设为 100%（副作用）.

`absolute` + `calc`

需要父元素及居中元素的固定宽高。

$width: 300px;
$height: 200px;

.parent {
  position: relative;
  height: 400px;
}
.children {
  position: absolute;
  width: $width;
  height: $height;
  left: calc(50% - #{$width/2});
  top: calc(50% - #{$height/2});
}

<div class="parent">
  <div class="children">得道多助，失道寡助，出自《孟子·公孙丑下》, 指站在正义方面会得到多数人的支持帮助；违背正义必然陷于孤立。文章通过对"天时"、"地利"、"人和", 并将这三者加以比较，层层递进。论证了"天时不如地利，地利不如人和"的道理。
  </div>
</div>

body {
  background:#f06d06;
}
.parent {
  background:white;
}
.children {
  background:black;
  color:white;
}
$width: 300px;
$height: 200px;
.parent {
  position: relative;
  height: 400px;
}
.children {
  position: absolute;
  width: $width;
  height: $height;
  left: calc(50% - #{$width/2});
  top: calc(50% - #{$height/2});
}

`absolute` + `transform:translate(-50%,-50%);`

If you don’t know the width or height, you can use the transform property and a negative translate of 50% in both directions (it is based on the current width/height of the element) to center:

不需要父元素及居中元素的固定宽高。

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

<div class="parent">
  <div class="children">得道多助，失道寡助，出自《孟子·公孙丑下》, 指站在正义方面会得到多数人的支持帮助；违背正义必然陷于孤立。文章通过对"天时"、"地利"、"人和", 并将这三者加以比较，层层递进。论证了"天时不如地利，地利不如人和"的道理。
  </div>
</div>

body {
  background:#f06d06;
}
.parent {
  background:white;
  height:400px;
}
.children {
  background:black;
  color:white;
  width:400px;
}
.parent {
  position:relative;
}
.children {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

`absolute` + `transform:translate3d(-50%,-50%,0);`

垂直水平居中未知高度宽度块状元素

.parent {
  position: relative;
}
.children {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

<div class="parent">
  <div class="children">得道多助，失道寡助，出自《孟子·公孙丑下》, 指站在正义方面会得到多数人的支持帮助；违背正义必然陷于孤立。文章通过对"天时"、"地利"、"人和", 并将这三者加以比较，层层递进。论证了"天时不如地利，地利不如人和"的道理。
  </div>
</div>

body {
  background:#f06d06;
}
.parent {
  background:white;
  height:400px;
}
.children {
  background:black;
  color:white;
  width:400px;
}
.parent {
  position:relative;
}
.children {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

`display:flex;` + `justify-content:center;` + `align-items:center;`

父容器设置 display:flex; + justify-content:center; + align-items:center;

<div class="parent">
  <div class="children">得道多助，失道寡助，出自《孟子·公孙丑下》, 指站在正义方面会得到多数人的支持帮助；违背正义必然陷于孤立。文章通过对"天时"、"地利"、"人和", 并将这三者加以比较，层层递进。论证了"天时不如地利，地利不如人和"的道理。
  </div>
</div>

  body {
  background:#f06d06;
}
.parent {
  background:white;
  height:400px;
}
.children {
  background:black;
  color:white;
  width:400px;
}
.parent {
  display:flex;
  justify-content:center;
  align-items:center;
}

`display:flex;` + `justify-content:center;` + `align-self:center;`

父容器设置 display:flex; + justify-content:center;
子容器设置 align-items:center;

<div class="parent">
  <div class="children">得道多助，失道寡助，出自《孟子·公孙丑下》, 指站在正义方面会得到多数人的支持帮助；违背正义必然陷于孤立。文章通过对"天时"、"地利"、"人和", 并将这三者加以比较，层层递进。论证了"天时不如地利，地利不如人和"的道理。
  </div>
</div>

body {
  background:#f06d06;
}
.parent {
  background:white;
  height:400px;
}
.children {
  background:black;
  color:white;
  width:400px;
}
.parent {
  display:flex;
  justify-content:center;  
}
.children {
  align-self:center;
}

`display:flex;` + `margin:auto;`

父容器设置 display:flex;
子容器设置 margin:auto;

<div class="parent">
  <div class="children">得道多助，失道寡助，出自《孟子·公孙丑下》, 指站在正义方面会得到多数人的支持帮助；违背正义必然陷于孤立。文章通过对"天时"、"地利"、"人和", 并将这三者加以比较，层层递进。论证了"天时不如地利，地利不如人和"的道理。</div>
</div>

body {
  background:#f06d06;
}
.parent {
  background:white;
  height:400px;
}
.children {
  background:black;
  color:white;
  width:400px;
}
.parent {
  display:flex;
}
.children {
  margin:auto;
}

`display:grid;` + `justify-content:center;` + `align-items:center;`

父容器设置 display:grid; + justify-content:center; + align-items:center;

<div class="parent">
  <div class="children">得道多助，失道寡助，出自《孟子·公孙丑下》, 指站在正义方面会得到多数人的支持帮助；违背正义必然陷于孤立。文章通过对"天时"、"地利"、"人和", 并将这三者加以比较，层层递进。论证了"天时不如地利，地利不如人和"的道理。
  </div>
</div>

body {
  background:#f06d06;
}
.parent {
  background:white;
  height:400px;
}
.children {
  width:400px;
  background:black;
  color:white;
}
.parent {
  display:grid;
  justify-content:center;
  align-items:center;
}

`display:grid;` + `justify-items:center;` + `align-items:center;`

父容器设置 display:grid; + justify-items:center; + align-items:center;

<div class="parent">
  <div class="children">得道多助，失道寡助，出自《孟子·公孙丑下》, 指站在正义方面会得到多数人的支持帮助；违背正义必然陷于孤立。文章通过对"天时"、"地利"、"人和", 并将这三者加以比较，层层递进。论证了"天时不如地利，地利不如人和"的道理。
  </div>
</div>

body {
  background:#f06d06;
}
.parent {
  background:white;
  height:400px;
}
.children {
  width:400px;
  background:black;
  color:white;
}
.parent {
  display:grid;
  justify-items:center;
  align-items:center;
}

`display:grid;` + `justify-content:center;` + `align-content:center;`

父容器设置 display:grid; + justify-content:center; + align-content:center;（此属性对单行 flex 容器（即带有的容器 flex-wrap:nowrap）没有影响。)

<div class="parent">
  <div class="children">得道多助，失道寡助，出自《孟子·公孙丑下》, 指站在正义方面会得到多数人的支持帮助；违背正义必然陷于孤立。文章通过对"天时"、"地利"、"人和", 并将这三者加以比较，层层递进。论证了"天时不如地利，地利不如人和"的道理。
  </div>
</div>

body {
  background:#f06d06;
}
.parent {
  background:white;
  height:400px;
}
.children {
  width:400px;
  background:black;
  color:white;
}
.parent {
  display:grid;
  justify-content:center;
  align-content:center;
}

`display:grid;` + `place-content:center;`

父容器设置 display:grid; + place-content:center;

<div class="parent">
  <div class="children">得道多助，失道寡助，出自《孟子·公孙丑下》, 指站在正义方面会得到多数人的支持帮助；违背正义必然陷于孤立。文章通过对"天时"、"地利"、"人和", 并将这三者加以比较，层层递进。论证了"天时不如地利，地利不如人和"的道理。
  </div>
</div>

  body {
  background:#f06d06;
}
.parent {
  background:white;
  height:400px;
}
.children {
  background:black;
  color:white;
  width:400px;
}
.parent {
  display:grid;
  place-content:center;
}

`display:grid;` + `justify-self:center;` + `align-self:center;`

父容器设置 display:grid;
子容器设置 justify-self:center; + align-self:center;

<div class="parent">
  <div class="children">得道多助，失道寡助，出自《孟子·公孙丑下》, 指站在正义方面会得到多数人的支持帮助；违背正义必然陷于孤立。文章通过对"天时"、"地利"、"人和", 并将这三者加以比较，层层递进。论证了"天时不如地利，地利不如人和"的道理。</div>
</div>

body {
  background:#f06d06;
}
.parent {
  background:white;
  height:400px;
}
.children {
  width:400px;
  background:black;
  color:white;
}
.parent {
  display:grid;
}
.children {
  justify-self:center;
  align-self:center;
}

`display:grid;` + `justify-items:center;` + `align-self:center;`

父容器设置 display:grid; + justify-items:center;
子容器设置 align-self:center;

<div class="parent">
  <div class="children">得道多助，失道寡助，出自《孟子·公孙丑下》, 指站在正义方面会得到多数人的支持帮助；违背正义必然陷于孤立。文章通过对"天时"、"地利"、"人和", 并将这三者加以比较，层层递进。论证了"天时不如地利，地利不如人和"的道理。</div>
</div>

body {
  background:#f06d06;
}
.parent {
  background:white;
  height:400px;
}
.children {
  width:400px;
  background:black;
  color:white;
}
.parent {
  display:grid;
  justify-items:center;
}
.children {
  align-self:center;
}

`display:grid;` + `justify-self:center;` + `align-items:center;`

父容器设置 display:grid; + align-items:center;
子容器设置 justify-self:center;

<div class="parent">
  <div class="children">得道多助，失道寡助，出自《孟子·公孙丑下》, 指站在正义方面会得到多数人的支持帮助；违背正义必然陷于孤立。文章通过对"天时"、"地利"、"人和", 并将这三者加以比较，层层递进。论证了"天时不如地利，地利不如人和"的道理。
  </div>
</div>

body {
  background:#f06d06;
}
.parent {
  background:white;
  height:400px;
}
.children {
  width:400px;
  background:black;
  color:white;
}
.parent {
  display:grid;
  align-items:center;
}
.children {
  justify-self:center;
}

`display:grid;` + `margin:auto;`

父容器设置 display:grid;
子容器设置 margin:auto;

<div class="parent">
  <div class="children">得道多助，失道寡助，出自《孟子·公孙丑下》, 指站在正义方面会得到多数人的支持帮助；违背正义必然陷于孤立。文章通过对"天时"、"地利"、"人和", 并将这三者加以比较，层层递进。论证了"天时不如地利，地利不如人和"的道理。</div>
</div>

body {
  background:#f06d06;
}
.parent {
  background:white;
  height:400px;
}
.children {
  background:black;
  color:white;
  width:50%;
}
.parent {
  display:grid;
}
.children {
  margin:auto;
}

Conclusion

You can totally center things in CSS.

Centering in the Unknown | CSS-Tricks

Centering Percentage Width/Height Elements

庄引

https://zhuangyin8.github.io/centering-css-complete-guide/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源庄引 !

Flexbox Grid Centering

JavaScript Questions

2021-05-10 Front-End

Q&A

25 JavaScript Tricks You Need To Know About (Part 2)

2021-02-09 JavaScript

Tricks

Centering in CSS - A Complete Guide

Horizontally

inline-* + text-align:center;

margin:auto

display:flex; + flex-direction:column; + align-items:center;

display:flex; + flex-direction:column; + align-self:center;

display:flex; + justify-content:center;

display:grid; + justify-content:center;

display:grid; + justify-items:center;

display:grid; + justify-self:center;

display:table-cell + margin-left

position:absolute + margin-left

width:fit-content

position:relative; +float:left; + margin-left

position:absolute; + left:50%; + transform:translateX(-50%);

Vertically

上下 padding 相等

height 和 line-height 相等 不换行文本素垂直居中

display:flex; + justify-content:center; + flex-direction:column;垂直居中

display:flex; + align-items:center; 垂直居中

display:flex; + align-self:center; 垂直居中

⊙▽⊙

固定高度垂直居中

未知高度垂直居中

Do you care if the element stretches the height of the container?

display:grid;+ align-items:center;

display:grid;+ align-content:center;

display:grid; + align-self:center;

Both Horizontally and Vertically

absolute + 负 margin

absolute + margin:auto;

absolute + calc

absolute + transform:translate(-50%,-50%);

absolute + transform:translate3d(-50%,-50%,0);

display:flex; + justify-content:center; + align-items:center;

display:flex; + justify-content:center; + align-self:center;

display:flex; + margin:auto;

display:grid; + justify-content:center; + align-items:center;

display:grid; + justify-items:center; + align-items:center;

display:grid; + justify-content:center; + align-content:center;

display:grid; + place-content:center;

display:grid; + justify-self:center; + align-self:center;

display:grid; + justify-items:center; + align-self:center;

display:grid; + justify-self:center; + align-items:center;

display:grid; + margin:auto;

Conclusion

你的赏识是我前进的动力

`inline-*` + `text-align:center;`

`margin:auto`

`display:flex;` + `flex-direction:column;` + `align-items:center;`

`display:flex;` + `flex-direction:column;` + `align-self:center;`

`display:flex;` + `justify-content:center;`

`display:grid;` + `justify-content:center;`

`display:grid;` + `justify-items:center;`

`display:grid;` + `justify-self:center;`

`display:table-cell` + `margin-left`

`position:absolute` + `margin-left`

`width:fit-content`

`position:relative;` +`float:left;` + `margin-left`

`position:absolute;` + `left:50%;` + `transform:translateX(-50%);`

上下 `padding` 相等

`height` 和 `line-height` 相等不换行文本素垂直居中

`display:flex;` + `justify-content:center;` + `flex-direction:column;`垂直居中

`display:flex;` + `align-items:center;` 垂直居中

`display:flex;` + `align-self:center;` 垂直居中

`display:grid;`+ `align-items:center;`

`display:grid;`+ `align-content:center;`

`display:grid;` + `align-self:center;`

`absolute` + 负 `margin`

`absolute` + `margin:auto;`

`absolute` + `calc`

`absolute` + `transform:translate(-50%,-50%);`

`absolute` + `transform:translate3d(-50%,-50%,0);`

`display:flex;` + `justify-content:center;` + `align-items:center;`

`display:flex;` + `justify-content:center;` + `align-self:center;`

`display:flex;` + `margin:auto;`

`display:grid;` + `justify-content:center;` + `align-items:center;`

`display:grid;` + `justify-items:center;` + `align-items:center;`

`display:grid;` + `justify-content:center;` + `align-content:center;`

`display:grid;` + `place-content:center;`

`display:grid;` + `justify-self:center;` + `align-self:center;`

`display:grid;` + `justify-items:center;` + `align-self:center;`

`display:grid;` + `justify-self:center;` + `align-items:center;`

`display:grid;` + `margin:auto;`