<DIV> 内垂直居中文本
Posted
技术标签:
【中文标题】<DIV> 内垂直居中文本【英文标题】：Center Text Vertically Within <DIV> 【发布时间】：2011-11-28 20:09:10 【问题描述】：我有一个高度固定的<div> 元素，我想在该元素中垂直居中一些文本。
我一直在尝试按照http://phrogz.net/css/vertical-align/index.html 的说明进行操作。但是，它似乎对我不起作用。
我已经在http://jsfiddle.net/scwebgroup/74Rnq/ 发布了我正在尝试的内容。如果我将 HeaderBrand 的 margin-top 更改为大约 -22px，它似乎是正确的。
谁能明白为什么文章中描述的技术对我来说没有按预期工作？
注意：最佳答案here 仅在文本不换行到第二行时才有效。
【问题讨论】：
正确演示：jsfiddle.net/74Rnq/2 谢谢，但在谷歌浏览器中，文本不是垂直居中的。 这不应该是解决方案。我只是改进了你自己的演示演示。 How to align text vertically center in div with css?的可能重复 @JonathanWood 我选择了这个答案，因为它更受欢迎。重复并不总是与新旧有关，例如，请参阅元数据上的this topic。 【参考方案1】：我最近很高兴发现 Flexbox 可以为您解决这个问题。下面 CSS 中的 flex-center 类将使您的 div 的文本在垂直和水平方向居中。这个例子有点破烂，所以我建议调整窗口的大小，直到 div 边框不与文本齐平。
至于是否可以在兼容性方面使用 flexbox，请参阅 Can I use...
我不完全理解为什么这会起作用，如果有人对 flex box 机制有更深入的了解，我会很高兴得到解释。
.border-boxed
box-sizing: border-box;
*, *:before, *:after
box-sizing: inherit;
body
/* This is just to make it look pretty */
box-sizing: border-box;
background: linear-gradient(135deg,
rgba(85,239,203,1) 0%,
rgba(30,87,153,1) 0%,
rgba(85,239,203,1) 0%,
rgba(91,202,255,1) 100%);
color: #f7f7f7;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: .8rem;
/* Expand <body> to entire viewport height */
height: 100vh;
/* Arrange the boxes in a centered, vertical column */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.flex-center
display: flex;
justify-content: center;
align-items: center;
.box
width: 25%;
height: 25%;
border: 2px solid #f7f7f7;
border-radius: 16px;
margin: .5rem;
text-transform: uppercase;
text-align: center;
.small
height: 8%;
<div class="box large flexitem flex-center">
Large Box. <br>
So big. <br>
My god.
</div>
<div class="box small flexitem flex-center">
Smaller Box
</div>【讨论】：
【参考方案2】：如下所示，您可以轻松地将文本元素的父元素设置为 position: relative，并将文本元素本身设置为 position: absolute;然后使用方向属性在父级内的文本周围移动。请参阅下面的示例...
<!--Good and responsive ways to center text vertically inside block elements-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Centered Text®</title>
<style type="text/css">
@charset "UTF-8";
*
margin: 0;
padding: 0;
body
font-family: Helvetica;
#wrapper
width: 100%;
height: auto;
#wrapper > div
margin: 40px auto;
overflow: hidden;
position: relative;
height: 100px;
width: 50%;
p
position: absolute;
word-wrap: break-word;
text-align: center;
color: white;
background-color: rgba(0,0,0,0.5);
#parent1
background-color: orange;
#parent1 p
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
height: auto;
width: auto;
padding-top: 30px; /* Parent1's height * 0.5 = parent1 p's padding-top (Adjust to make look more centered) */
#parent2
background-color: skyblue;
#parent2 p
left: 50%;
top: 50%;
padding: 10px;
transform: translate(-50%, -50%);
#parent3
background-color: hotpink;
#parent3 p
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
</style>
</head>
<body>
<div id="wrapper">
<div id="parent1">
<p>Center Method 1</p>
</div>
<div id="parent2">
<p>Center Method 2</p>
</div>
<div id="parent3">
<p>Center Method 3</p>
</div>
</div>
</body>
</html>【讨论】：
【参考方案3】：这个：
<!DOCTYPE html>
<style>
.outer outline: 1px solid #eee;
.outer > p display: table-cell; height: 200px; vertical-align: middle;
</style>
<div class="outer">
<p>This text will be vertically aligned</p>
</div>
<div class="outer">
<p>This longer text will be vertically aligned. Assumenda quinoa cupidatat messenger bag tofu. Commodo sustainable raw denim, lo-fi keytar brunch high life nisi labore 3 wolf moon readymade eiusmod viral. Exercitation velit ex, ***lyn farm-to-table in hoodie id aliquip. Keytar skateboard synth blog minim sed. Nisi do wes anderson seitan, banksy sartorial +1 cliche. Iphone scenester tumblr consequat keffiyeh you probably haven't heard of them, sartorial qui hoodie. Leggings labore cillum freegan put a bird on it tempor duis.</p>
</div>
适用于现代浏览器，无论文本是只跨越一行还是多行。
还更新了http://jsfiddle.net/74Rnq/135/ 的小提琴@ 不知道当东西本身只有 150 像素宽度时，你在左边用 625 像素的边距做了什么……通过删除内联样式并使用一点填充来整理一下也是。
【讨论】：
【参考方案4】：我知道这种方法会添加一些 HTML，但它似乎适用于所有主流浏览器（甚至 IE7+）。
基本 HTML 结构
<div id="hold">
<div>Content</div>
<div class="aligner"> </div>
</div>
需要 CSS
#hold
height:400px;
div
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
vertical-align:middle;
.aligner
width:0px;
height:100%;
overflow:hidden;
The jsFiddle
【讨论】：
【参考方案5】：我无法确定我引用的文章中的代码对我不起作用的原因。有几个人提供了答案，但没有什么让我觉得跨浏览器可靠。
最终，我决定将我的文字保留在一行，我不太喜欢这样。但我确实需要我的技术清晰易懂，并且能够可靠地工作。
【讨论】：
【参考方案6】：您可以尝试将 line-height 设置为 div 的高度，如下所示：
<div style="height:200px;border:1px solid #000;">
<span style="line-height:200px;">Hello world!</span>
</div>
这是另一种似乎有效的技术：
#vertical
position:absolute;
top:50%;
left:0;
width:100%;
<div style="position:relative;height:200px;">
<div id="vertical">
Hello world!
</div>
</div>
【讨论】：
谢谢，但这似乎与我最后提到的 *** 链接中描述的技术相同。这是一种很好的干净技术，但如果文本换行到第二行，则会失败。 @JonathanWood - 如果你想要这种技术有多行，你可以在这里按照我的回答：***.com/questions/7542387/… 谢谢，但这对我来说有点太“外面”了。您警告说它不适用于 IE7，这对我来说是个障碍。【参考方案7】：当前设置的一种方法是将顶部边距设置为 -25%
http://jsfiddle.net/ycAta/
它看起来不正常的唯一原因是因为位置是基于文本顶部的，并且存在必要的间隙，因为并非所有字母的高度都相同。
作为手动修复 -30% 看起来更好。 :P
【讨论】：
谢谢，但我不确定这是否解释了为什么它不像我正在使用的文章那样工作。如果我不能解释它，我不能说它在不同的浏览器中工作的可能性有多大。而且，事实上，当我将您的链接加载到 IE9 中时，我根本看不到文字。 @JonathanWood 更正：top:25% 而不是 margin-top 更好。但至于为什么其他方法不起作用，我不知道。我得再看看那篇文章。 @JonathanWood This example 大致可以工作（据我所知，即使在 IE7 中[IE7 模式下的 IE9]）。同样它是有限的，但基本上假设有一个两行高度的内容框，并针对不同的字母高度补偿 5%。以上是关于<DIV> 内垂直居中文本的主要内容，如果未能解决你的问题，请参考以下文章