css垂直对齐_6个CSS技巧以垂直对齐内容

让我们来谈谈CSS中的垂直对齐，或者更确切地说是如何不可行的。 CSS尚未提供将容器内的内容垂直居中的官方方法。 这个问题可能使各地的Web开发人员感到沮丧。 但是不要害怕，在这篇文章中，我们将由您来指导一些技巧，这些技巧可以帮助您模仿效果 。

但是，这些技巧可能有局限性，您可能必须使用多个技巧才能完成这种错觉。 如果您知道其他任何窍门，请在评论中告诉我们。

1.使用绝对定位

我们将在这里看到的第一个技巧是使用position属性。 您有两个<div> ，一个是容器，另一个是包含内容的子元素。

我们将首先将容器元素的位置设置为相对，然后将子元素位置设置为absolute 。 这使我们可以将其自由地放置在整个容器中。

要使其垂直对齐，请从顶部将子元素位置移动容器高度的一半，然后将其向上拉动子元素宽度的一半。 这是输出：

当只有一个子元素时，此技巧是完美的，否则absolute位置将影响同一容器中的其他元素。

2.使用CSS3转换

CSS3 Transform使将内容置于中心变得容易。 与position属性不同， CSS3 Transform不会影响同一容器内其他元素的位置。

假设我们具有与前面的方法相同HTML结构-一个父级，一个子元素-从顶部算起50% ，并使用CSS转换给出-50%的转换。 那里有。

请记住，尽管CSS3转换在Internet Explorer 8及更低版本中不起作用。 您可能要在这里使用其他任何方法作为备用。

3.使用填充

我们还可以使用padding来创建垂直对齐的错觉。 为此，只需将顶部和底部填充均等设置，如下所示：

如果您没有将容器设置为固定宽度，而只是将宽度设置为auto ，则此技巧非常适合。

4.使用线高

如果容器中只有一行文本内容，则可以使用line-height属性垂直对齐文本。 将line-height值设置为与容器高度大致相同，您将看到以下输出。

请记住，此技巧仅适用于一行文本。 如果内容分成两行或更多行，则每行之间的间距将与我们在line-height指定line-height ，从而给我们提供了太多的空白。

5.使用CSS表

就个人而言，使用CSS表格是我最喜欢的应用垂直对齐方式的技巧。 它可以在旧浏览器（如Internet Explorer 8）中工作。此方法通过将容器元素显示设置为table ，而子元素将显示为table-cell然后使用vertical-align属性将文本垂直居中。

6.使用Flexbox

垂直居中的最后一种方法是使用Flexbox。 Flexbox是CSS3中的新模块。 它提供了一种更简单的对齐内容的方法。 要将内容垂直放置在flex框中，只需添加align-items: center; 如下，仅此而已。

请记住，Flexbox某些浏览器仅支持Flexbox模块的部分功能，例如Internet Explorer 10，Safari，6和Chrome 27及以下版本。 因此，类似于CSS3 Transform的技巧，请确保在这些浏览器中效果很好。

翻译自: https://www.hongkiat.com/blog/css-tricks-vertical-align-content/