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

这是我的<div>风格:

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

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


当前回答

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

第二部分{高度: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>

其他回答

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

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

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

第二部分{高度: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>

一种更好、更简单、更快速的方法是将CSS中的页边空白设置为45%左右:

margin-top: 45%;

你可能需要玩这个数字,但它将位于周围分区的中心。

<!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>

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

例子:

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