在<DIV>中垂直居中文本
我有一个具有固定高度的<div>元素，我想在该元素中垂直居中一些文本。
我一直在试图遵循http://phrogz.net/css/vertical-align/index.html上的说明。 但是，它似乎并没有为我工作。
我已经发布了我想在http://jsfiddle.net/scwebgroup/74Rnq/ 。 如果我将HeaderBrand的margin-top更改为大约-22px，那看起来是正确的。
任何人都可以看到为什么文章中描述的技术没有按预期为我工作？
注意：这里最好的答案只适用于文本不换行到第二行。
这个：
<!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, brooklyn 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>
可以在现代浏览器中使用，而不pipe文本是否跨越一行或多行。
还更新了小提琴在http://jsfiddle.net/74Rnq/135/不知道你在做什么左边625px的边缘，当事情本身只有150px的宽度;…整理了一些东西删除内联样式并使用一些填充以及。
你可以尝试设置线高度的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>
我知道这种方法增加了一些HTML，但它似乎在所有主stream浏览器（甚至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; }
jsFiddle
如下所示，您可以轻松地将文本元素的父元素设置为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>
目前的设置方法之一是将margin-top设置为-25％
唯一的原因是因为这个位置是基于文本的顶部，并且有一个必要的差距，因为不是所有的字母都是相同的高度。
由于手动修复-30％看起来更好。 ：P
我无法确定为什么我引用的文章中的代码不适用于我的原因。 有几个人提供了答案，但没有什么让我感到可靠的浏览器。
最终，我决定把我的文本放在一行，我不喜欢这么多。 但是我确实需要我的技术清晰明了，并且能够可靠地工作。
我最近很高兴地发现，Flexbox可以为您解决这个问题。 下面CSS中的flex-center类将垂直和水平居中div的文本。 这个例子有点砸了，所以我build议调整窗口的大小，直到div边框不与文本齐平。
至于是否可以摆脱使用flexbox兼容性，请参阅我可以使用…
我不完全理解为什么这样做，如果有人对柔性盒机器有更多的了解，我很乐意解释。
.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>
