我有一个包含文本的<div>元素,我想将这个<div>的内容垂直居中对齐。
这是我的<div>风格:
#盒子{高度:170px;宽度:270px;背景:#000;字体大小:48px;颜色:#FFF;文本对齐:居中;}<div id=“box”>Lorem ipsum悲哀坐</div>
实现这一目标的最佳方式是什么?
我有一个包含文本的<div>元素,我想将这个<div>的内容垂直居中对齐。
这是我的<div>风格:
#盒子{高度:170px;宽度:270px;背景:#000;字体大小:48px;颜色:#FFF;文本对齐:居中;}<div id=“box”>Lorem ipsum悲哀坐</div>
实现这一目标的最佳方式是什么?
当前回答
.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>
其他回答
灵活的方法
第二部分{宽度: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>
这是使用Flexbox的另一个选项。
#集装箱{显示:柔性;高度:200px;背景:橙色;}.儿童{边距:自动;}<div id=“container”><div class=“child”><span>Lorem ipsum dolor坐在amet consectetur adipiscing elit。鼹鼠,尼莫</span></div></div>
后果
这里有一篇关于CSS居中的好文章。过来看。
简单而通用的方法是表格方法):
[ctrv]{
display: table !important;
}
[ctrv] > *{ /* Addressing direct descendants */
display: table-cell;
vertical-align: middle;
// text-align: center; /* Optional */
}
在父标记上使用此属性(或等效的类)甚至可以使许多子标记对齐:
<parent ctrv> <ch1/> <ch2/> </parent>
无论屏幕大小或div大小如何,以下代码都会将div放在屏幕中间:
.中央屏幕{显示:柔性;弯曲方向:柱;对齐内容:中心;对齐项目:居中;文本对齐:居中;最小高度:100vh;}<html><head></head><body><div class=“center screen”>我在中心</div></body></html>
请在此处查看有关flex的更多详细信息。
.element{position: relative;top: 50%;transform: translateY(-50%);}
将此小代码添加到元素的CSS属性中。太棒了。试试看!