我有一个包含文本的<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>

其他回答

另一种方式(此处尚未提及)是使用Flexbox。

只需向容器元素添加以下代码:

display: flex;
justify-content: center; /* Align horizontal */
align-items: center; /* Align vertical */

Flexbox演示1

.box格式{高度:150px;宽度:400px;背景:#000;字体大小:24px;字体样式:倾斜;颜色:#FFF;文本对齐:居中;填充:0 20px;边距:20px;显示:柔性;对齐内容:中心;/*水平对齐*/对齐项目:居中;/*垂直对齐*/}<div class=“box”>Lorem ipsum dolor坐amet,consectetuer adipiscing elit,sed diam nonmmy笔尖</div>

或者,当柔性容器中只有一个柔性项时,flexbox也可以使用自动边距将柔性项居中,而不是通过容器对齐内容(如上面问题中给出的示例)。

因此,要在水平和垂直方向上将柔性项居中,只需将其设置为margin:auto

Flexbox演示2

.box格式{高度:150px;宽度:400px;背景:#000;字体大小:24px;字体样式:倾斜;颜色:#FFF;文本对齐:居中;填充:0 20px;边距:20px;显示:柔性;}.箱形跨度{边距:自动;}<div class=“box”><span>边距:在弹性项上自动将其水平和垂直居中</span></div>

注意:以上所有内容都适用于在水平行中排列项目时对中项目。这也是默认行为,因为默认情况下,弯曲方向的值为row。然而,如果柔性项需要在垂直列中布局,则应在容器上设置柔性方向:列,以将主轴设置为列,此外,justify-content和align-items财产现在与justify content相反:垂直居中和align-items:水平居中)

灵活方向:列演示

.box格式{高度:150px;宽度:400px;背景:#000;字体大小:18px;字体样式:倾斜;颜色:#FFF;显示:柔性;弯曲方向:柱;对齐内容:中心;/*垂直对齐项目*/对齐项目:居中;/*水平对齐项目*/}p型{边距:5px;}<div class=“box”><p>当伸缩方向为列时。。。</p><p>“对齐内容:居中”-垂直对齐</p><p>“对齐项目:居中”-水平对齐</p></div>

flexyboxes是一个很好的地方,可以从Flexbox开始了解它的一些功能并获取语法以获得最大的浏览器支持

此外,现在的浏览器支持非常好:caniuse

为了实现显示的跨浏览器兼容性:调整和对齐项目,可以使用以下选项:

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

您可以尝试以下基本方法:

第二部分{高度:100px;线条高度:100px;文本对齐:居中;边框:2px虚线#f69c55;}<div>你好,世界!</div>

但它只适用于单行文本,因为我们将行的高度设置为与包含框元素相同的高度。


更通用的方法

这是垂直对齐文本的另一种方式。此解决方案适用于单行和多行文本,但仍需要固定高度的容器:

第二部分{高度:100px;线条高度:100px;文本对齐:居中;边框:2px虚线#f69c55;}跨度{显示:内联块;垂直对齐:中间;线高度:正常;}<div><span>你好,世界</span></div>

CSS只是调整<div>的大小,通过将<div>线的高度设置为等于其高度来垂直居中对齐<span>,并使<span>成为具有垂直对齐:中间的内联块。然后,它将<span>的线高度设置回正常值,因此其内容将在块内自然流动。


模拟表显示

这里还有另一个选项,它可能在不支持display:table和display:tablecell(基本上只有InternetExplorer7)的旧浏览器上不起作用。使用CSS,我们模拟表行为(因为表支持垂直对齐),HTML与第二个示例相同:

第二部分{显示:表格;高度:100px;宽度:100%;文本对齐:居中;边框:2px虚线#f69c55;}跨度{显示:表格单元格;垂直对齐:中间;}<div><span>你好,世界</span></div>


使用绝对定位

该技术使用绝对定位的元素,将顶部、底部、左侧和右侧设置为0。这在《粉碎杂志》的一篇文章中有更详细的描述,《CSS中的绝对水平和垂直居中》。

第二部分{显示:柔性;对齐内容:中心;对齐项目:居中;高度:100px;宽度:100%;边框:2px虚线#f69c55;}<div><span>你好,世界</span></div>

CSS3柔性接线盒有一个小小的魔力:

/*重要*/部分{显示:柔性;显示:-webkit flex;}第p节{/*关键部件*/边距:自动;}/*不重要,着色和UI*/部分{高度:200px;宽度:60%;边距:自动;边框半径:20px;边框:3px实心橙色;背景色:金色;}第p节{文本对齐:居中;font-family:Cantarell,Calibri;字体大小:15px;背景色:黄色;边框半径:20px;填充:15px;}<章节><p>我是一个居中的盒子<br/>Flexbox很棒!</p></section>

提示:如果要将文本居中,请将上面标记为“关键部件”的行替换为以下行之一:

仅垂直:边距:自动0;仅水平:边距:0自动;

正如我注意到的,这个技巧也适用于网格(即display:grid)。

这是使用Flexbox的另一个选项。

#集装箱{显示:柔性;高度:200px;背景:橙色;}.儿童{边距:自动;}<div id=“container”><div class=“child”><span>Lorem ipsum dolor坐在amet consectetur adipiscing elit。鼹鼠,尼莫</span></div></div>

后果

这里有一篇关于CSS居中的好文章。过来看。

我需要一排可点击的大象,垂直居中,但不用桌子来绕过一些InternetExplorer9的奇怪之处。

我最终找到了最好的CSS(满足我的需要),它与Firefox、Chrome和InternetExplorer11非常配合。遗憾的是,Internet Explorer 9仍然在嘲笑我。。。

第二部分{边框:1px蓝色虚线;显示:内联;线条高度:100px;高度:100px;}跨度{边框:1px纯红色;显示:内联块;线高度:正常;垂直对齐:中间;}.输出{边框:3px纯银;显示:内联块;}<div class=“out”onclick=“alert(1)”><div><span><img src=“http://www.birdfolk.co.uk/littleredsolo.png“/></span></div><div><span>一个可爱的可点击选项</span></div></div><div class=“out”onclick=“alert(2)”><div><span><img src=“http://www.birdfolk.co.uk/bang2/Ship01.png“/></span></div><div><span>点击一些迷人的东西。</span></div></div>

显然,你不需要边界,但它们可以帮助你了解它是如何工作的。