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

这是我的<div>风格:

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

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


当前回答

.element{position: relative;top: 50%;transform: translateY(-50%);}

将此小代码添加到元素的CSS属性中。太棒了。试试看!

其他回答

另一种方式:

不要设置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中。

绝对定位和拉伸

与上面的方法一样,首先将父元素和子元素上的位置分别设置为相对和绝对。从那里情况就不同了。

在下面的代码中,我再次使用了该方法来水平和垂直地居中子对象,尽管您只能使用该方法进行垂直居中。

HTML

<div id="parent">
    <div id="child">Content here</div>
</div>

CSS

#parent {position: relative;}
#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

此方法的思想是通过将上、下、右和左值设置为0,尝试使子元素延伸到所有四条边。因为我们的子元素比我们的父元素小,所以它不能到达所有的四条边。

然而,将自动设置为所有四边的边距会导致相反的边距相等,并将子div显示在父div的中心。

不幸的是,上面的方法在InternetExplorer7及以下版本中不起作用,并且像前面的方法一样,子div中的内容可能会变得太大,导致其被隐藏。

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

例子:

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

.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>

无论您想要垂直居中样式,都可以尝试显示:表格单元格和垂直对齐:中间。

例子:

#盒子{显示:表格单元格;垂直对齐:中间;高度:90px;宽度:270px;背景:#000;字体大小:48px;字体样式:倾斜;颜色:#FFF;文本对齐:居中;页边空白:20px;左边距:5px;}<div Id=“box”>Lorem ipsum dolor坐amet,consectetur adipiscing elit。</div>