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

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

这是我的＜div＞风格：

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

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

当前回答

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

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

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

2018-01-02 10:21:56

其他回答

.text{
   background: #ccc;
   position: relative;
   float: left;
   text-align: center;
   width: 400px;
   line-height: 80px;
   font-size: 24px;
   color: #000;
   float: left;
 }

2016-09-05 05:39:51

CSS3柔性接线盒有一个小小的魔力：

/*重要*/部分{显示：柔性；显示：-webkit flex；}第p节{/*关键部件*/边距：自动；}/*不重要，着色和UI*/部分{高度：200px；宽度：60%；边距：自动；边框半径：20px；边框：3px实心橙色；背景色：金色；}第p节{文本对齐：居中；font-family:Cantarell，Calibri；字体大小：15px；背景色：黄色；边框半径：20px；填充：15px；}<章节><p>我是一个居中的盒子<br/>Flexbox很棒！</p></section>

提示：如果要将文本居中，请将上面标记为“关键部件”的行替换为以下行之一：

仅垂直：边距：自动0；仅水平：边距：0自动；

正如我注意到的，这个技巧也适用于网格（即display:grid）。

2016-12-13 20:09:41

无论您想要垂直居中样式，都可以尝试显示：表格单元格和垂直对齐：中间。

例子：

#盒子{显示：表格单元格；垂直对齐：中间；高度：90px；宽度：270px；背景：#000；字体大小：48px；字体样式：倾斜；颜色：#FFF；文本对齐：居中；页边空白：20px；左边距：5px；}<div Id=“box”>Lorem ipsum dolor坐amet，consectetur adipiscing elit。</div>

2016-10-31 17:52:33

这是个更好的主意。你也可以这样做

身体html格式{高度：100%；}.父级{空白：nowrap；高度：100%；文本对齐：居中；}.父项：在之后{显示：内联块；垂直对齐：中间；高度：100%；内容：“”；}.居中{显示：内联块；垂直对齐：中间；空白：正常；}<div class=“parent”><div class=“center”><p>Lorem ipsum dolor坐amet</p＞</div></div>

2018-05-24 11:01:02

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

纯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

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

推荐文章

最新文章

标签