css垂直对齐_6个CSS技巧以垂直对齐内容
让我们来谈谈CSS中的垂直对齐，或者更确切地说是如何不可⾏的。 CSS尚未提供将容器内的内容垂直居中的官⽅⽅法。 这个问题可能使各地的Web开发⼈员感到沮丧。 但是不要害怕，在这篇⽂章中，我们将由您来指导⼀些技巧，这些技巧可以帮助您模仿效果 。
但是，这些技巧可能有局限性，您可能必须使⽤多个技巧才能完成这种错觉。 如果您知道其他任何窍门，请在评论中告诉我们。
1.使⽤绝对定位
我们将在这⾥看到的第⼀个技巧是使⽤position属性。 您有两个<div> ，⼀个是容器，另⼀个是包含内容的⼦元素。
我们将⾸先将容器元素的位置设置为相对，然后将⼦元素位置设置为absolute 。 这使我们可以将其⾃由地放置在整个容器中。
要使其垂直对齐，请从顶部将⼦元素位置移动容器⾼度的⼀半，然后将其向上拉动⼦元素宽度的⼀半。 这是输出：
当只有⼀个⼦元素时，此技巧是完美的，否则absolute位置将影响同⼀容器中的其他元素。
2.使⽤CSS3转换
CSS3 Transform使将内容置于中⼼变得容易。 与position属性不同， 不会影响同⼀容器内其他元素的位置。
假设我们具有与前⾯的⽅法相同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的技巧，请确保在这些浏览器中效果很好。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论