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

这是我的<div>风格:

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

其他回答

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

[ctrv]{
    display: table !important;
}

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

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

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

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

margin-top: 45%;

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

另一种方式(此处尚未提及)是使用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;

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

例子:

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

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

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