CSS垂直居中

Posted 春天的风夏天的雨

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS垂直居中相关的知识,希望对你有一定的参考价值。

垂直居中

CSS让人头疼的问题就是垂直居中。实现垂直居中好几种方式,但每一种方式都有一定的局限性,所以垂直居中可以根据实际的业务场景来使用。

在容器里让内容居中最好的方式是根据特定场景考虑不同因素。做出判断前,先逐个询问自己以下几个问题,直到找到合适的解决办法。

  • 容器里面的内容只有一行文字?
  • 容器自然高度?
  • 容器需要指定高度或者避免使用内边距?
  • 使用Flexbox布局?
  • 容器和内容的高度都知道?
  • 不知道内部元素的高度?

容器里面的内容只有一行文字

设置一个大的行高,让它等于理想的容器高度。这样会让容器高度扩展到能够容纳行高。如果内容不是行内元素,可以设置为inline-block

<!DOCTYPE html>
<html lang="en">
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    div {
      height: 60px;
      background-color: #1888fa;
      color: white;
    }
    span {
      line-height: 60px;
    }
  </style>
  <body>
    <div>
      <span>测试居中</span>
    </div>
  </body>
</html>

容器自然高度

CSS中最简单的垂直居中方法是给容器相等的上下内边距,让容器和内容自行决定自己的高度。

看下面的例子, 通过设置padding-toppadding-bottom相等的值,让内容在父容器垂直剧中。

<!DOCTYPE html>
<html lang="en">
   <style>
      * {
        padding: 0;
        margin: 0;
      }
      div {
        padding-top: 20px;  
        padding-bottom: 20px;
        background-color: #1888FA;
        color: white;
      }
    </style>
    <body>
      <div>
         <span>测试居中</span>
      </div>
    </body>
</html>

容器需要指定高度或者避免使用内边距

可以给父容器设置display: table, 子元素设置display: table-cell;vertical-align: middle;, 让子元素来垂直居中。

<!DOCTYPE html>
<html lang="en">
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    div {
      width: 100%;
      height: 60px;
      background-color: #1888fa;
      color: white;
      display: table;
    }
    span {
      display: table-cell;
      vertical-align: middle;
    }
  </style>
  <body>
    <div>
      <span>测试居中</span>
    </div>
  </body>
</html>

使用 FlexBox

使用flex布局在做居中的时候非常容易。

<!DOCTYPE html>
<html lang="en">
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    div {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #1888fa;
      color: white;
    }
  </style>
  <body>
    <div>
      <span>测试居中</span>
    </div>
  </body>
</html>

容器和内容的高度都知道

将内容使用绝对定位, 只有其他方法都无法实现,才推荐这种。

<!DOCTYPE html>
<html lang="en">
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    div {
      height: 100px;
      background-color: #1888fa;
      color: white;
      position: relative;
    }
    span{
      position: absolute;
      top: 35px;
      display: inline-block;
      height: 30px;
    }
  </style>
  <body>
    <div>
      <span>测试居中</span>
    </div>
  </body>
</html>

不知道内部元素的高度

将内容使用绝对定位 + transform, 只有其他方法都无法实现,才推荐这种。

<!DOCTYPE html>
<html lang="en">
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    div {
      height: 100px;
      background-color: #1888fa;
      color: white;
      position: relative;
    }
    span {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
  <body>
    <div>
      <span>测试居中</span>
    </div>
  </body>
</html>

总结

应结合实际的业务场景来具体使用哪种方式。

参考

How to Center in CSS

以上是关于CSS垂直居中的主要内容,如果未能解决你的问题,请参考以下文章

CSS代码片段

前端面试CSS系列——DIV垂直水平居中

CSS label中的文字垂直居中,有简单代码。

怎么使用CSS让图片水平垂直都居中?

css html 如何将图片img标签 水平居中 垂直居中 和水平垂直居中

css html 如何将图片img标签 水平居中 垂直居中 和水平垂直居中