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

这是我的<div>风格:

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

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


当前回答

您可以在CSS中使用定位方法:

检查此处的结果。。。。

HTML格式:

<div class="relativediv">
  <p>
    Make me vertical align as center
  </p>
</div>

CSS:

.relativediv {
    position: relative;
    border: 1px solid #DDD;
    height: 300px;
    width: 300px
}
.relativediv p {
    position: absolute;
    top: 50%;
    transfrom: translateY(-50%);
}

其他回答

满足所有垂直对齐需求!

声明此Mixin:

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

然后将其包含在元素中:

.element{
    @include vertical-align();
}

您还可以使用以下财产。

display: flex; 
align-content: center; 
justify-content : center;

简单而通用的方法是表格方法):

[ctrv]{
    display: table !important;
}

[ctrv] > *{ /* Addressing direct descendants */
      display: table-cell;
      vertical-align: middle;
      // text-align: center; /* Optional */
}

在父标记上使用此属性(或等效的类)甚至可以使许多子标记对齐:

<parent ctrv>  <ch1/>  <ch2/>   </parent>

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

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

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

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

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