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

这是我的<div>风格:

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

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


当前回答

较新的浏览器现在支持CSS calc功能。如果您针对的是这些浏览器,您可能需要考虑这样做:

<div style=“位置:相对;宽度:400px;高度:400px,背景色:红色”><span style=“位置:绝对;行高:40px;高度:80px;文本对齐:居中;宽度:300px;溢出:隐藏;顶部:计算(50%-40px);左侧:计算(50%-150px);”>这里有两条线,即使父div改变大小,也会居中。</span></div>

关键是在绝对或相对定位的父除法中使用style=“top:calc(50%-[inerFixedHeightInPX/2]px);height:[inerFixed HeightInPX;”。

其他回答

您可以在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%);
}
.text{
   background: #ccc;
   position: relative;
   float: left;
   text-align: center;
   width: 400px;
   line-height: 80px;
   font-size: 24px;
   color: #000;
   float: left;
 }

另一种方式:

不要设置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中。

我不确定是否有人走上了写作模式的道路,但我认为它彻底解决了问题,并得到了广泛的支持:

.垂直{//边框:1px实心绿色;写入模式:垂直lr;文本对齐:居中;高度:100%;宽度:100%;}.水平{//边框:1px纯蓝色;显示:内联块;书写方式:水平tb;宽度:100%;文本对齐:居中;}.内容{文本对齐:左侧;显示:内联块;边框:1px实心#e0e0e0;衬垫:.5em 1em;边界半径:1em;}<div class=“vertical”><div class=“horizontal”><div class=“content”>我以垂直和水平为中心</div></div></div>

当然,这将适用于您需要的任何维度(除了100%的父维度)。如果取消注释边界线,这将有助于熟悉自己。

JSFiddle演示供您摆弄。

犬只支持:85.22%+6.26%=91.48%(甚至Internet Explorer也支持!)

.element{position: relative;top: 50%;transform: translateY(-50%);}

将此小代码添加到元素的CSS属性中。太棒了。试试看!