我有一个包含文本的<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>
实现这一目标的最佳方式是什么?
当前回答
绝对定位和拉伸
与上面的方法一样,首先将父元素和子元素上的位置分别设置为相对和绝对。从那里情况就不同了。
在下面的代码中,我再次使用了该方法来水平和垂直地居中子对象,尽管您只能使用该方法进行垂直居中。
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中的内容可能会变得太大,导致其被隐藏。
其他回答
一种更好、更简单、更快速的方法是将CSS中的页边空白设置为45%左右:
margin-top: 45%;
你可能需要玩这个数字,但它将位于周围分区的中心。
所有功劳都归于该链接所有者@Sebastian Ekström link;请仔细检查一下。在行动代码笔中看到它。通过阅读上述文章,我还创建了一个演示小提琴。
只需要三行CSS(不包括供应商前缀),我们就可以借助转换来实现:translateY垂直居中,即使我们不知道它的高度。
CSS属性转换通常用于旋转和缩放元素,但通过其translateY函数,我们现在可以垂直对齐元素。通常,这必须通过绝对定位或设置行高度来完成,但这些要求您知道元素的高度,或者仅适用于单行文本等。
为此,我们写下:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
这就是你所需要的。这是一种类似于绝对位置方法的技术,但其优点是我们不必在元素上设置任何高度,也不必在父元素上设置位置属性。它可以直接开箱即用,即使在Internet Explorer 9中也是如此!
为了使其更加简单,我们可以将其编写为带有供应商前缀的混合体。
.text{
background: #ccc;
position: relative;
float: left;
text-align: center;
width: 400px;
line-height: 80px;
font-size: 24px;
color: #000;
float: left;
}
.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>