AtoZ CSS截屏视频：CSS中的垂直对齐

Loading the player…

正在加载播放器…

This screencast is a part of our AtoZ CSS Series. You can find other entries to the series here.

该截屏视频是我们的AtoZ CSS系列的一部分。 您可以在此处找到该系列的其他条目。

成绩单 (Transcript)

Vertical centering is a firm favorite of designers – for both print and digital media.

对于印刷和数字媒体，垂直居中是设计师的最爱。

But aligning things vertically with CSS is not the easiest thing to do.

但是，将内容与CSS垂直对齐并不是最容易的事情。

This issue is made worse in a world of multiple devices and responsive design as we need our elements to be flexible in height – which can make calculating their vertical center quick tricky.

在具有多个设备和快速响应设计的世界中，此问题变得更加严重，因为我们需要元素height灵活-这可能会使计算垂直中心变得非常棘手。

In this episode we’ll learn all about:

在这一集中，我们将学习以下所有内容：

• The vertical-align property and how and when it works

  vertical-align属性及其工作方式和时间

• A method for vertical aligning an element with a known height

  一种垂直对齐具有已知height的元素的方法

• And finally one approach for vertically centering elements with variable height.

  最后是一种使height可变的元素垂直居中的方法。

vertical-align (vertical-align)

The vertical-align property only affects elements with their display set to inline, inline-block or table-cell.

vertical-align属性仅影响display设置为inline ， inline-block或table-cell元素。

It takes a length, percentage or keyword value.

它需要一个长度，百分比或关键字值。

Lengths and percentages align the baseline of the element at that given distance above the baseline of its parent.

长度和百分比将元素的baseline对齐到其父级baseline上方给定距离处。

Keyword values can be one of the following:

关键字值可以是以下之一：

• baseline

  baseline

• sub

  sub

• super

  super

• text-top

  text-top

• text-bottom

  text-bottom

• middle

  middle

• top

  top

• bottom

  bottom

Most of these are quite intuitive but sub aligns the baseline to the parent’s sub-script baseline and super aligns the baseline of the element to the parent’s super-script baseline.

其中大部分是很直观，但sub对齐到的baseline到父的子脚本baseline和super对齐到的baseline元素父的超级脚本的baseline 。

Let’s take a look at vertical-align in a practical example.

让我们看一个实际示例中的vertical-align 。

I’ve got a grid of images and text here and all of them have different heights which means the text doesn’t all align neatly.

我在这里有图像和文本的网格，它们的高度都不同，这意味着文本并不能整齐地对齐。

<div class="grid"> 
  <img src="http://placebacn.com/200/400"> 
  <h2>grilled bacon</h2> 
</div> 
<div class="grid"> 
  <img src="http://placebacn.com/200/300"> 
  <h2>tasty bacon</h2> 
</div> 
<div class="grid"> 
  <img src="http://placebacn.com/200/200"> 
  <h2>crispy bacon</h2> 
</div> 
<div class="grid"> 
  <img src="http://placebacn.com/200/350"> 
  <h2>bacon</h2> 
</div>

We can set the grid containers to display:inline-block and use vertical-align: bottom on the images to make everything line up nicely.

我们可以将网格容器设置为display:inline-block并在图像的vertical-align: bottom使用vertical-align: bottom来使所有内容vertical-align: bottom 。

If there was no text here and we wanted all the images to be vertically centered, we could use vertical-align: middle and achieve quite a nice effect.

如果此处没有文本，并且我们希望所有图像都垂直居中，则可以使用vertical-align: middle并获得不错的效果。

垂直居中 (Vertical centering)

In “Episode 12: line-height“ we looked at line-height and demoed one way to fake vertical centering for text.

在“ 第12集： line-height ”中，我们研究了line-height并演示了一种伪造文本垂直居中的方法。

If I wanted to center a whole container of multiple elements inside of another container, we’ll need a different approach.

如果我想将一个包含多个元素的整个容器居中放置在另一个容器中，则需要一种不同的方法。

I’ve got a container here with a dark background and a border around it. Inside is another, smaller box with a width and height set to give it some shape.

我在这里有一个深色背景的容器，周围有一个边框。 内部是另一个较小的盒子，其width和height设置为具有一定形状。

<div class="container"> 
  <div class="box">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis
  aperiam quidem minima a qui ipsa deleniti nisi modi nesciunt
  dolores, consequatur dolorem, dignissimos debitis distinctio.
  Voluptas eligendi fuga voluptatem eos. 
  </div>
</div>

If we know the height of this box, we can use absolute positioning to vertically and horizontally center it within the container.

如果我们知道此盒子的height ，则可以使用绝对定位将其在容器内垂直和水平居中。

With position: relative on the container, the box can be positioned absolutely within it. If we set the top and left properties to 50% the box will be moved 50% away from the top and 50% away from the left, leaving the top-left corner of the box placed in the exact center of the container.

position: relative对于容器，盒子可以完全定位在容器中。 如果将top和left属性设置为50%该框将从顶部移出50％，从left移出50％，从而将框的左上角放置在容器的确切中心。

.container {
  position: relative;
  background: #444;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 400px;
  height: 200px;
  margin: -100px 0 0 -200px;

  color: #fff;
  background: #cc3f85;
}

With a fixed width and height, we can set negative margins on the box; half the height to the top and half the width to the left. And now the box is centered in the container.

使用固定的width和height ，我们可以在盒子上设置负边距； 顶部的一半height和左侧的一半width 。 现在，盒子位于容器的中央。

This technique works well but the downside is that all the widths are fixed – which means it’s not a great solution if working on a responsive project.

该技术效果很好，但缺点是所有宽度都是固定的–这意味着如果要进行响应式项目，这并不是一个很好的解决方案。

流体垂直中心 (Fluid vertical center)

We can accomplish vertical centering of fluid height elements by combining knowledge of vertical-align:middle and pseudo elements which we covered in “Episode 16: CSS Pseudo Elements“.

通过结合“ 第16集：CSS伪元素 ”中介绍的vertical-align:middle和pseudo元素的知识，可以完成流体height元素的垂直居中。

We’ll take the same example of a box inside a container from before, but this time, the subject box will be fluid.

我们将使用与以前相同的容器中的框示例，但是这次，主题框将是流畅的。

The trick is to create an invisible element – using a pseudo element – that will be the full height of the container and set it to inline-block and vertical-align:middle. We can then vertically center the inner box by also making it inline-block and vertical-align: center. It can be centered horizontally with text-align: center.

技巧是使用伪元素创建一个不可见元素，该元素将是容器的整个height ，并将其设置为inline-block和vertical-align:middle 。 然后，我们还可以通过将内框设置为inline-block和vertical-align: center 。 可以使用text-align: center其水平text-align: center 。

.container {
  height: 400px;
  margin: 20px;
  background: #444;
  font-size: 0;
  text-align: center;
}

.container:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
}

.box {
  display: inline-block;
  width: 50%;
  padding: 2em;
  border: 1px solid #000;
  background: #cc3f85;
  font-size: 1rem;
  vertical-align: middle;
}

Now as the container box changes its width, the percentage width of the child box also changes, altering its height – but the box remains vertically centered. Pretty sweet, eh?

现在，随着容器框的width变化，子框的百分比width也发生变化，从而改变了其height -但该框仍保持垂直居中。 很漂亮吧？

翻译自: https://www.sitepoint.com/atoz-css-screencast-vertical/