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

这是我的<div>风格:

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

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


当前回答

这是使用Flexbox的另一个选项。

#集装箱{显示:柔性;高度:200px;背景:橙色;}.儿童{边距:自动;}<div id=“container”><div class=“child”><span>Lorem ipsum dolor坐在amet consectetur adipiscing elit。鼹鼠,尼莫</span></div></div>

后果

这里有一篇关于CSS居中的好文章。过来看。

其他回答

如果你不在乎它的视觉3D效果,就在button而不是div中设置它。

#盒子{高度:120px;宽度:300px;背景:#000;字体大小:48px;字体样式:倾斜;颜色:#FFF;}<button Id=“box”禁用>Lorem ipsum dolor坐amet,consectetur adipiscing elit。</按钮>

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

[ctrv]{
    display: table !important;
}

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

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

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

灵活的方法

第二部分{宽度:250px;最小高度:50px;线条高度:50px;文本对齐:居中;边框:1px实心#12346;边距底部:5px;}跨度{显示:内联块;垂直对齐:中间;线高度:正常;}<div><span>Lorem ipsum dolor坐amet,consectetur adipiscing elit<br/>Lorem ipsum dolor坐amet,consectetur adipiscing elit<br/>Lorem ipsum dolor坐amet,consectetur adipiscing elit</span></div><div><span>Lorem ipsum dolor坐amet,consectetur adipiscing elit</span></div><div><span>Lorem ipsum dolor坐amet</span></div><div>

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

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

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

尝试转换属性:

#盒子{高度:90px;宽度:270px;位置:绝对;顶部:50%;左:50%;转换:转换(-50%,-50%);}<div Id=“box”>Lorem ipsum dolor坐amet,consectetur adipiscing elit。</div>