如何使用 CSS 垂直居中文本? [英] How do I vertically center text with CSS?

问题描述

我有一个包含文本的

元素，我想将此

的内容垂直居中对齐.

这是我的

样式:

#box {高度:170px；宽度:270px；背景:#000；字体大小:48px；颜色:#FFF；文本对齐:居中；}

Lorem ipsum dolor 坐

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

解决方案

你可以试试这个基本方法:

div {高度:100px；行高:100px；文本对齐:居中；边框:2px 虚线 #f69c55;}

你好，世界！

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

<小时>

更通用的方法

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

div {高度:100px；行高:100px；文本对齐:居中；边框:2px 虚线 #f69c55;}跨度 {显示:内联块；垂直对齐:中间；行高:正常；}

<span>Hello World!</span>

CSS 只是调整

的大小，通过设置

' 垂直居中对齐 s line-height 等于它的高度，并使 成为带有 vertical-align: middle 的内联块.然后它将 的行高设置回正常，因此它的内容将在块内自然流动.

<小时>

模拟表格显示

这是另一个选项，它可能不适用于不支持 display: table 的旧版 浏览器 和 display: table-cell(基本上就是 Internet Explorer 7).我们使用 CSS 模拟表格行为(因为表格支持垂直对齐)，HTML 与第二个示例相同:

div {显示:表；高度:100px；宽度:100%；文本对齐:居中；边框:2px 虚线 #f69c55;}跨度 {显示:表格单元格；垂直对齐:中间；}

<span>Hello World!</span>

<小时>

使用绝对定位

此技术使用绝对定位元素，将顶部、底部、左侧和右侧设置为 0.在 Smashing Magazine 的一篇文章中对其进行了更详细的描述，CSS 中的绝对水平和垂直居中.

div {显示:弹性；对齐内容:居中；对齐项目:居中；高度:100px；宽度:100%；边框:2px 虚线 #f69c55;}

<span>Hello World!</span>

I have a <div> element which contains text and I want to align the contents of this <div> vertically center.

Here is my <div> style:

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}

<div id="box">
  Lorem ipsum dolor sit
</div>

What is the best way to achieve this goal?

解决方案

You can try this basic approach:

div {
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 2px dashed #f69c55;
}

<div>
  Hello World!
</div>

It only works for a single line of text though, because we set the line's height to the same height as the containing box element.

---

A more versatile approach

This is another way to align text vertically. This solution will work for a single line and multiple lines of text, but it still requires a fixed height container:

div {
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

<div>
  <span>Hello World!</span>
</div>

The CSS just sizes the <div>, vertically center aligns the <span> by setting the <div>'s line-height equal to its height, and makes the <span> an inline-block with vertical-align: middle. Then it sets the line-height back to normal for the <span>, so its contents will flow naturally inside the block.

---

Simulating table display

And here is another option, which may not work on older browsers that don't support display: table and display: table-cell (basically just Internet Explorer 7). Using CSS we simulate table behavior (since tables support vertical alignment), and the HTML is the same as the second example:

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}

<div>
  <span>Hello World!</span>
</div>

---

Using absolute positioning

This technique uses an absolutely positioned element setting top, bottom, left and right to 0. It is described in more detail in an article in Smashing Magazine, Absolute Horizontal And Vertical Centering In CSS.

div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  width: 100%;
  border: 2px dashed #f69c55;
}

<div>
  <span>Hello World!</span>
</div>

这篇关于如何使用 CSS 垂直居中文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！