我有一个包含文本的<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>
实现这一目标的最佳方式是什么?
当前回答
.element{position: relative;top: 50%;transform: translateY(-50%);}
将此小代码添加到元素的CSS属性中。太棒了。试试看!
其他回答
一种更好、更简单、更快速的方法是将CSS中的页边空白设置为45%左右:
margin-top: 45%;
你可能需要玩这个数字,但它将位于周围分区的中心。
无论屏幕大小或div大小如何,以下代码都会将div放在屏幕中间:
.中央屏幕{显示:柔性;弯曲方向:柱;对齐内容:中心;对齐项目:居中;文本对齐:居中;最小高度:100vh;}<html><head></head><body><div class=“center screen”>我在中心</div></body></html>
请在此处查看有关flex的更多详细信息。
简单而通用的方法是表格方法):
[ctrv]{
display: table !important;
}
[ctrv] > *{ /* Addressing direct descendants */
display: table-cell;
vertical-align: middle;
// text-align: center; /* Optional */
}
在父标记上使用此属性(或等效的类)甚至可以使许多子标记对齐:
<parent ctrv> <ch1/> <ch2/> </parent>
这是个更好的主意。你也可以这样做
身体html格式{高度:100%;}.父级{空白:nowrap;高度:100%;文本对齐:居中;}.父项:在之后{显示:内联块;垂直对齐:中间;高度:100%;内容:“”;}.居中{显示:内联块;垂直对齐:中间;空白:正常;}<div class=“parent”><div class=“center”><p>Lorem ipsum dolor坐amet</p></div></div>
您还可以使用以下财产。
display: flex;
align-content: center;
justify-content : center;