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

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

这是我的＜div＞风格：

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

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

当前回答

这非常有效。

您必须为div使用表样式，为内容使用居中对齐。

2016-08-10 12:42:15

其他回答

另一种方式：

不要设置div的height属性，而是使用padding:来实现效果。与行高度类似，它仅在您有一行文本时有效。尽管这样，如果您有更多的内容，文本仍然会居中，但div本身会稍微大一些。

因此，与其继续：

div {
  height: 120px;
  line-height: 120px;
}

你可以说：

div {
   padding: 60px 0; /* Maybe 60 minus font-size divided by two, if you want to be exact */
}

这会将div的顶部和底部填充设置为60px，左侧和右侧填充设置为零，使div高120像素（加上字体的高度），并将文本垂直居中放置在div中。

2014-09-28 18:07:30

您可以尝试以下基本方法：

第二部分{高度：100px；线条高度：100px；文本对齐：居中；边框：2px虚线#f69c55；}＜div＞你好，世界！</div>

但它只适用于单行文本，因为我们将行的高度设置为与包含框元素相同的高度。

更通用的方法

这是垂直对齐文本的另一种方式。此解决方案适用于单行和多行文本，但仍需要固定高度的容器：

第二部分{高度：100px；线条高度：100px；文本对齐：居中；边框：2px虚线#f69c55；}跨度{显示：内联块；垂直对齐：中间；线高度：正常；}＜div＞<span>你好，世界</span></div>

CSS只是调整＜div＞的大小，通过将＜div＞线的高度设置为等于其高度来垂直居中对齐＜span＞，并使＜span＞成为具有垂直对齐：中间的内联块。然后，它将＜span＞的线高度设置回正常值，因此其内容将在块内自然流动。

模拟表显示

这里还有另一个选项，它可能在不支持display:table和display:tablecell（基本上只有InternetExplorer7）的旧浏览器上不起作用。使用CSS，我们模拟表行为（因为表支持垂直对齐），HTML与第二个示例相同：

第二部分{显示：表格；高度：100px；宽度：100%；文本对齐：居中；边框：2px虚线#f69c55；}跨度{显示：表格单元格；垂直对齐：中间；}＜div＞<span>你好，世界</span></div>

使用绝对定位

该技术使用绝对定位的元素，将顶部、底部、左侧和右侧设置为0。这在《粉碎杂志》的一篇文章中有更详细的描述，《CSS中的绝对水平和垂直居中》。

第二部分{显示：柔性；对齐内容：中心；对齐项目：居中；高度：100px；宽度：100%；边框：2px虚线#f69c55；}＜div＞<span>你好，世界</span></div>

2012-01-14 21:26:33

这是使用Flexbox的另一个选项。

#集装箱{显示：柔性；高度：200px；背景：橙色；}.儿童{边距：自动；}<div id=“container”><div class=“child”><span>Lorem ipsum dolor坐在amet consectetur adipiscing elit。鼹鼠，尼莫</span></div></div>

后果

这里有一篇关于CSS居中的好文章。过来看。

2018-11-25 12:26:34

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

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

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

2018-01-02 10:21:56

我只想扩展Michielvoo的答案，以释放对线高度和呼吸div高度的需求。它基本上只是这样一个简化版本：

第二部分{宽度：250px；/*高度：100px；线条高度：100px*/文本对齐：居中；边框：1px实心#12346；背景色：#bbbbff；填充：10px；边距：10px；}跨度{显示：内联块；垂直对齐：中间；线高度：正常；}＜div＞<span>所有的成年人都曾经是孩子。。。但只有少数人记得</span></div>＜div＞<span>现在这是我的秘密，一个非常简单的秘密：只有用心才能看清真相；本质的东西是肉眼看不见的</span></div>

注：注释了封闭分区固定高度所需的cssis部分。

2015-02-22 13:59:26

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

推荐文章

最新文章

标签