我有一个包含文本的<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>
实现这一目标的最佳方式是什么?
当前回答
供参考并添加更简单的答案:
纯CSS:
.vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
或作为SASS/SCSS混合物:
@mixin vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
使用人:
.class-to-center {
@include vertical-align;
}
由Sebastian Ekström的博客文章垂直对齐任何东西,只需3行CSS:
由于元素放置在“半像素”上,此方法可能会导致元素模糊。对此的解决方案是将其父元素设置为preserve-3d。如下所示:
.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
我们生活在2015年+,每个主要的现代浏览器都支持Flex Box。
这将是网站从现在开始制作的方式。
学习它!
其他回答
请尝试以下代码:
display: table-cell;
vertical-align: middle;
第二部分{高度:80%;宽度:100%;文本对齐:居中;显示:表格单元格;垂直对齐:中间;背景:#4CAF50;颜色:#fff;字体大小:50px;字体样式:斜体;}<div>Lorem Ipsum只是印刷和排版行业的虚拟文本。自15世纪以来,Lorem Ipsum一直是业界的标准虚拟文本</div>
作为答案被接受的解决方案是完美的,使用与div高度相同的行高度,但当文本被换行或是两行时,此解决方案无法完美工作。
如果文本被换行或在div中的多行上,请尝试此操作。
#box
{
display: table-cell;
vertical-align: middle;
}
有关更多参考信息,请参阅:
垂直居中多行文本CSS垂直居中的6种方法
另一种方式:
不要设置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中。
无论屏幕大小或div大小如何,以下代码都会将div放在屏幕中间:
.中央屏幕{显示:柔性;弯曲方向:柱;对齐内容:中心;对齐项目:居中;文本对齐:居中;最小高度:100vh;}<html><head></head><body><div class=“center screen”>我在中心</div></body></html>
请在此处查看有关flex的更多详细信息。
您可以在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%);
}