如何使用CSS垂直居中文本？

我有一个包含文本的＜div＞元素，我想将这个＜div＞的内容垂直居中对齐。

这是我的＜div＞风格：

#盒子{高度：170px；宽度：270px；背景：#000；字体大小：48px；颜色：#FFF；文本对齐：居中；}<div id=“box”>Lorem ipsum悲哀坐</div>

实现这一目标的最佳方式是什么？

当前回答

作为答案被接受的解决方案是完美的，使用与div高度相同的行高度，但当文本被换行或是两行时，此解决方案无法完美工作。

如果文本被换行或在div中的多行上，请尝试此操作。

#box
{
  display: table-cell;
  vertical-align: middle;
}

有关更多参考信息，请参阅：

垂直居中多行文本CSS垂直居中的6种方法

2015-06-29 09:26:47

其他回答

<!DOCTYPE html>
<html>
  <head>
    <style>
      .main{
        height:450px;
        background:#f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-box-align: center;
        align-items: center;
        justify-content: center;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <h1>Hello</h1>
    </div>
  </body>
</html>

2017-03-17 05:00:33

供参考并添加更简单的答案：

纯CSS：

.vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

或作为SASS/SCSS混合物：

@mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

使用人：

.class-to-center {
    @include vertical-align;
}

由Sebastian Ekström的博客文章垂直对齐任何东西，只需3行CSS：

由于元素放置在“半像素”上，此方法可能会导致元素模糊。对此的解决方案是将其父元素设置为preserve-3d。如下所示：

.parent-element {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

我们生活在2015年+，每个主要的现代浏览器都支持Flex Box。

这将是网站从现在开始制作的方式。

学习它！

2014-10-25 18:12:33

无论屏幕大小或div大小如何，以下代码都会将div放在屏幕中间：

.中央屏幕{显示：柔性；弯曲方向：柱；对齐内容：中心；对齐项目：居中；文本对齐：居中；最小高度：100vh；}<html><head></head><body><div class=“center screen”>我在中心</div></body></html>

请在此处查看有关flex的更多详细信息。

2018-01-02 10:21:56

请尝试以下代码：

display: table-cell;
vertical-align: middle;

第二部分{高度：80%；宽度：100%；文本对齐：居中；显示：表格单元格；垂直对齐：中间；背景：#4CAF50；颜色：#fff；字体大小：50px；字体样式：斜体；}＜div＞Lorem Ipsum只是印刷和排版行业的虚拟文本。自15世纪以来，Lorem Ipsum一直是业界的标准虚拟文本</div>

2017-11-23 19:22:36

我看到了前面的答案，它们只适用于屏幕的宽度（没有响应）。对于反应灵敏的用户，您必须使用flex。

例子：

div { display:flex; align-items:center; }

2018-02-28 06:25:34

如何使用CSS垂直居中文本？

推荐文章

最新文章

标签