css居中 垂直居中_CSS垂直居中

css居中 垂直居中

Front-end developing is beautiful, and it's getting prettier by the day. Nowadays we got so many concepts, methodologies, good practices and whatnot to make our work stand out from the rest. Javascript (along with its countless third party libraries) and CSS have grown so big, helping us create things that even a couple of years ago were deemed impossible. But there's one thing that's often left in the dark, I'm sure you've stumbled with it at least once, and we know its fix is not always very good looking: vertically centering elements.

前端开发很漂亮，而且一天比一天漂亮。 如今，我们有太多的概念，方法论，良好实践和其他让我们的工作脱颖而出的东西。 Javascript(以及无数的第三方库)和CSS变得如此庞大，帮助我们创建了甚至几年前都被认为不可能的事情。 但是有一件事经常在黑暗中遗留下来，我敢肯定您至少偶然发现过它一次，而且我们知道它的修复效果并不总是很好：垂直居中的元素。

View Demo 观看演示

Now, there are many ways of addressing this issue: the table method, the height and half height method, the inserting-another-element-slash-pseudo-element-with-vertical-align-and-height-100% method, the calculate on load method, and more. Each of these seems dirtier than the last, it gets even more complicated when the element's height is unknown (be it a parent's or children's), and don't get me started on how bad it looks like when working with responsive layouts.

现在，有很多方法可以解决此问题：表格方法，高度和半高方法，使用垂直对齐和高度100％插入另一个元素斜杠假元素元素，计算负载法，等等。 这些元素似乎都比上一个更脏，当元素的高度未知时(无论是父元素还是孩子元素)，它会变得更加复杂，并且不要让我开始了解使用响应式布局时它的外观如何糟糕。

For a good time I went with the "calculate on load" method. The premise was simple: get the parent's height, subtract the children's height, divide by 2, and inline the top property with the result as a px value. Essentially, 50% of the parent's height - 50% of the children's height, done. Here's a visual representation of it:

好一会儿我选择了“计算负载”方法。 前提很简单：获取父母的身高，减去孩子的身高，除以2，然后将top属性内联为px值。 本质上，完成了父母身高的50％-孩子身高的50％。 这是它的视觉表示：

Figure 1 - The red "210px" is the value we need to set on the "top" property.

图1-红色的“ 210px”是我们需要在“ top”属性上设置的值。

And I know what you are thinking, "Inlining CSS is bad!!!", but this was the least ugly solution. It didn't require to change any element's box model, waste its pseudo-elements, insert another element just for the sake of a fix, nor any other hackery. But as I said before, things got trickier when the element's dimensions were unknown.

而且我知道您在想什么，“内联CSS不好！”，但这是最不丑的解决方案。 它不需要更改任何元素的盒子模型，浪费其伪元素，仅出于修复目的而插入另一个元素，也不需要任何其他黑客手段。 但是正如我之前所说，当元素的尺寸未知时，事情变得更加棘手。

Sure, you could get over this by using a script that runs after the window has loaded, or on window/object resize, and then recalculate the positions. But what if you've got hundreds of elements, each getting resized to fit their parents frames? The script will take a huge performance hit. And more importantly, why complicate things so much when there's a simple, pure CSS solution?

当然，您可以通过使用脚本来克服此问题，该脚本在窗口加载后运行，或者在调整窗口/对象大小时运行，然后重新计算位置。 但是，如果您有数百个元素，每个元素的大小都经过调整以适合其父框架，该怎么办？ 该脚本将极大地影响性能。 更重要的是，当有一个简单的纯CSS解决方案时，为什么要使事情变得如此复杂呢？

范例HTML (Sample HTML)

Our example will be base on the following HTML:

我们的示例将基于以下HTML：

<div class="parent">
  <div class="children">I'm vertically centered!</div>
</div>

This is a frequent case: a parent with children we desire to be vertically centered.

这是一个常见的情况：一个有孩子的父母希望我们垂直居中。

输入CSS3转换 (Enter CSS3 Transforms)

One interesting thing about CSS transforms is that, when applying them with percentage values, they base that value on the dimensions of the element which they are being implemented on, as opposed to properties like top, right, bottom, left, margin, and padding, which only use the parent's dimensions (or in case of absolute positioning, which uses its closest relative parent).

关于CSS变换的一件有趣的事情是，当将它们与百分比值一起应用时，它们基于实现它们的元素的尺寸来确定该值，而不是像top，right，bottom，left，margin和padding这样的属性，仅使用父级的尺寸(或在绝对定位的情况下，使用其最接近的相对父级)。

Knowing this, we could apply the same "calculate on load" method's small equation, but now adapting it to just CSS. First, we move the element in question down to the middle of it's parent using top: 50%, then we pull it back up by half of said element, with transform: translateY(-50%). Of course, the element must be relative, absolute, or fixed. If we look back to Figure 1, this is exactly what we have achieved.

知道了这一点，我们可以应用相同的“按负载计算”方法的小方程式，但现在将其仅用于CSS。 首先，我们使用top：50％将有问题的元素向下移动到其父元素的中间，然后使用transform：translateY(-50％)将其拉回所述元素的一半。 当然，元素必须是相对的，绝对的或固定的。 如果回头看图1，这正是我们所实现的。

.children{
	background: #ffdb4c;
	height: 300px;
	position: relative;
	top: 50%;
	transform: 			translateY(-50%);
}

As we are using percentages, these elements will be vertically centered no matter how tall their parents are, or what unknown and random changes they experiment while the user interacts with them.

当我们使用百分比时，这些元素将垂直居中，无论其父母的身高多高，还是在用户与他们互动时他们尝试进行哪些未知且随机的变化。

View Demo 观看演示

Finally, a few warnings: If you want to centralice a relative positioned element, its parent must have a height value, i.e., it won't work if said parent's height is set to auto. And of course, as most CSS3 features and properties, transforms don't work in IE 8 and earlier versions.

最后，一些警告：如果要集中放置相对位置的元素，则其父元素必须具有height值，即，如果将所述父元素的高度设置为auto，则它将不起作用。 当然，由于大多数CSS3功能和特性，转换在IE 8和更早版本中均不起作用。

翻译自: https://davidwalsh.name/css-vertical-center

css居中 垂直居中