CSS中居中的完全指南（中英对照翻译）

翻译自：https://css-tricks.com/centering-css-complete-guide/

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.

在CSS中把元素放置到中间是件麻烦的事情。为什么它这么难呢？他们嘲笑道。我认为问题不是它多难做，而在于这根据不同的情况有很多的方式来做，它难在怎样选用来达到设计目标。

因此我们来做一个选择树，希望能让这个事情变得简单。

 I need to center…

我需要居中...

Horizontally

水平居中

Is it inline or inline-* elements (like text or links)?

是内联元素么？

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

如果你是要水平居中一个块级元素的内联子元素，只需要：

.center-children {
  text-align: center;
}

 

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

这个会在内联元素，内联块元素，内联表，内联flex之类的情况起效果。

Is it a block level element?

　　是块级元素么？

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:

你可以通过给一个块级元素margin-left 和margin-right样式赋予auto （并且这个块级元素设置了一个宽度，否则这个块级元素会拉伸到占满宽度，也就不需要居中了）来居中它。通常是这么写的：

.center-me {
  margin: 0 auto;
}

 

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

不论你给块级元素和它的父元素设置了多大的宽度，这都会起效果。

Note that you can’t float an element to the center. There is a trick though.

注意你不能用float样式把元素居中到中心。（这里有个小诀窍）

Is there more than one block level element?

　　有多个块级元素的情况么？

If you have two or more block-level elements that need to be centered horizontally in a row, chances are you’d be better served making them a different display type. Here’s an example of making them inline-block and an example of flexbox:

如果你有2个以上的块级元素需要在同一行内水平居中，你可以把它们改成另一种display类型。这里有使用inline-block和flexbox的例子：

 

Unless you mean you have multiple block level elements stacked on top of each other, in which case the auto margin technique is still fine:

除非你想要把多个块级元素上下堆叠在一起，使用auto magrin的技巧仍然可以得到很好效果。

 

Vertically

垂直居中

Vertical centering is a bit trickier in CSS.

在CSS里垂直居中需要一点技巧。

Is it inline or inline-* elements (like text or links)?

　　是inline或者inline-* 元素（像文本或者超链接）

Is it a single line?

　　是单行的？

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

有时候 行级/文本 元素 看起来是垂直居中的，只是因为上下有同样的padding数值。

.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

 

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.

如果因为某些原因不能用padding来垂直居中文本并且你确定文本不用换行，还有个用行高来等效实现居中的办法：

.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

 

Is it multiple lines?

　　是多行的么？

Equal padding on top and bottom can give the centered effect for multiple lines of text too, but if that isn’t going to work, perhaps the element the text is in can be a table cell, either literally or made to behave like one with CSS. The vertical-align property handles this, in this case, unlike what it normally does which is handle the alignment of elements aligned on a row. (More on that.)

使用相等的上下padding来实现多行（文本，行级元素）垂直居中效果是可以的，但是如果这么做不行的时候，或许这些元素可以放进一个table的格子里，或者使用css字面上指定它像一个格子里的元素一样表现。vertical-align属性可以处理这个，这样，它就不像通常那样而是在表行内对齐了。

 

 

If something table-like is out, perhaps you could use flexbox? A single flex-child can be made to center in a flex-parent pretty easily.

如果说类似table的写法已经过时了，或许你可以使用flexbox?单个flex-child可以在一个flex-parent内简单完美地完成对齐。

.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

 

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.

记住父级有一个固定高度（px,%之类），也就是容器是否有一个固定高度是很重要的。

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.

如果两个技巧都失败了，你可以使用“幽灵元素”技巧，也就是把一个100%高度的伪元素防止到容器内，然后文本就可以垂直居中了。

.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;
}

 

Is it a block-level element?

　　是块级元素么？

　　

Do you know the height of the element?

　　　　你知道元素高度么？

It’s fairly common to not know the height in web page layout, for lots of reasons: if the width changes, text reflow can change the height. Variance in the styling of text can change the height. Variance in the amount of text can change the height. Elements with a fixed aspect ratio, like images, can change height when resized. Etc.

在网页布局中由于各种原因无法明确高度是常见状况，比如：宽度改变，文本重新流式排版会造成高度改变各种各样style的文本会改变高度。不同数量的文本会改变高度。含有固定宽高比的元素，比如图片，会在尺寸变化时改变高度。诸如此类。

But if you do know the height, you can center vertically like:

但是如果你知道高度，你可以像这样垂直居中元素：

.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; */
}

 

Is the element of unknown height?

　　　　是高度未知的元素么？

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

把它提升自身高度的50%然后用top把它向下移动父元素的一半高度来实现居中仍然是可行的。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  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.

如果不在意，你只需要用table或者css指定的类table行为技巧来让它垂直居中。

 

 

Can you use flexbox?

　　　　你可以使用flexbox么？

No big surprise, this is a lot easier in flexbox.

没什么好惊讶，用flexbox简单多了。

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

 

You can also get centering in flexbox using margin: auto; on the child element.

在flexbox中你也可以在子元素中使用 margin:auto; 来实现垂直居中

 

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:

你可以组合使用以上的任意时髦技术来实现完美的元素居中效果。但是我发现通常最终会成为三种情况：

Is the element of fixed width and height?

　　是有固定宽高的元素么？

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:

在使用absolute定位元素到50% 50%之后，再对它们自身宽高使用-50%magrin的技巧，会得到非常好的跨浏览器兼容的居中效果。

.parent {
  position: relative;
}

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

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

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

 

Is the element of unknown width and height?

元素的宽高未知么？

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:

如果你不知道元素的宽或者高，你可以对水平垂直同时使用transform属性设置到-50%（这个50%是基于被居中的元素的宽高的）的办法来居中元素：

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

 

Can you use flexbox?

你可以使用flexbox么？

To center in both directions with flexbox, you need to use two centering properties:

使用flexbox水平垂直同时居中，你需要使用连个居中属性：

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

 

Can you use grid?

你可以使用grid么？

This is just a little trick (sent in by Lance Janssen) that will pretty much work for one element:

这个有点取巧（Lance Janssen发来的），它对于单个元素效果非常完美：

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

 

　　

Conclusion

　　总结

　　You can totally center things in CSS.

　　你可以在css里居中所有东西