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

这是我的<div>风格:

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

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


当前回答

另一种方式(此处尚未提及)是使用Flexbox。

只需向容器元素添加以下代码:

display: flex;
justify-content: center; /* Align horizontal */
align-items: center; /* Align vertical */

Flexbox演示1

.box格式{高度:150px;宽度:400px;背景:#000;字体大小:24px;字体样式:倾斜;颜色:#FFF;文本对齐:居中;填充:0 20px;边距:20px;显示:柔性;对齐内容:中心;/*水平对齐*/对齐项目:居中;/*垂直对齐*/}<div class=“box”>Lorem ipsum dolor坐amet,consectetuer adipiscing elit,sed diam nonmmy笔尖</div>

或者,当柔性容器中只有一个柔性项时,flexbox也可以使用自动边距将柔性项居中,而不是通过容器对齐内容(如上面问题中给出的示例)。

因此,要在水平和垂直方向上将柔性项居中,只需将其设置为margin:auto

Flexbox演示2

.box格式{高度:150px;宽度:400px;背景:#000;字体大小:24px;字体样式:倾斜;颜色:#FFF;文本对齐:居中;填充:0 20px;边距:20px;显示:柔性;}.箱形跨度{边距:自动;}<div class=“box”><span>边距:在弹性项上自动将其水平和垂直居中</span></div>

注意:以上所有内容都适用于在水平行中排列项目时对中项目。这也是默认行为,因为默认情况下,弯曲方向的值为row。然而,如果柔性项需要在垂直列中布局,则应在容器上设置柔性方向:列,以将主轴设置为列,此外,justify-content和align-items财产现在与justify content相反:垂直居中和align-items:水平居中)

灵活方向:列演示

.box格式{高度:150px;宽度:400px;背景:#000;字体大小:18px;字体样式:倾斜;颜色:#FFF;显示:柔性;弯曲方向:柱;对齐内容:中心;/*垂直对齐项目*/对齐项目:居中;/*水平对齐项目*/}p型{边距:5px;}<div class=“box”><p>当伸缩方向为列时。。。</p><p>“对齐内容:居中”-垂直对齐</p><p>“对齐项目:居中”-水平对齐</p></div>

flexyboxes是一个很好的地方,可以从Flexbox开始了解它的一些功能并获取语法以获得最大的浏览器支持

此外,现在的浏览器支持非常好:caniuse

为了实现显示的跨浏览器兼容性:调整和对齐项目,可以使用以下选项:

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

其他回答

另一种方式:

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

较新的浏览器现在支持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;”。

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

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

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

.box{宽度:100%;背景:#000;字体大小:48px;颜色:#FFF;文本对齐:居中;}.高度{线条高度:170px;高度:170px;}.转换{高度:170px;位置:相对;}.转换p{边距:0;位置:绝对;顶部:50%;左:50%;-ms变换:平移(-50%,-50%);转换:转换(-50%,-50%);}<h4>使用高度</h4><div class=“box height”>Lorem ipsum悲哀坐</div><hr/><h4>使用变换</h4><div class=“box transform”><p>Lorem ipsum悲哀坐</p></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%);
}