在div中垂直alignment文本
我正在尝试find最有效的方式来alignment文本与div。 我已经尝试了一些东西，似乎没有工作。
.testimonialText { position: absolute; left: 15px; top: 15px; width: 150px; height: 309px; vertical-align: middle; text-align: center; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; padding: 1em 0 1em 0; } 在CSS中垂直居中
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
文章摘要：
对于CSS2浏览器，可以使用display:table / display:table-cell来将内容居中。
JSFiddle也提供样例 ：
<div style="display: table; height: 400px; overflow: hidden;"> <div style="display: table-cell; vertical-align: middle;"> <div> everything is vertically centered in modern IE8+ and others. </div> </div> </div>
有可能将老式浏览器（IE6 / 7）的黑客手段合并到使用#样式中，以隐藏较新浏览器的样式：
<div style="display: table; height: 400px; #position: relative; overflow: hidden;"> <div style= " #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;"> <div style=" #position: relative; #top: -50%"> everything is vertically centered </div> </div> </div>
您需要添加line-height属性，并且该属性必须匹配div的高度。 在你的情况下：
height: 309px; line-height: 309px;
事实上，你可能完全删除height属性。
这只适用于一行文本 ，所以要小心。
更新 – 这是一个很好的资源
以CSS为中心是一个痛苦的屁股。 似乎有一个巨大的方法来做到这一点，取决于各种因素。 这巩固了他们，并给你你需要的每个情况的代码。
更新 – 使用Flexbox
为了保持这篇文章最新的最新技术，这里有一个更容易的方法来集中使用flexbox的东西。 Flexbox在IE9 and lower不受支持。
这里有一些很好的资源：
- Flexbox指南
- 用flexbox居中元素
- Flexbox的IE10语法
- 支持Flexbox
jsfiddle与浏览器前缀
HTML
<ul> <li> <p>Some Text</p> </li> <li> <p>A bit more text that goes on 2 lines</p> </li> <li> <p>Even more text that demonstrates how lines can span multiple lines</p> </li> </ul>
CSS
li { display: flex; justify-content:center; align-content:center; flex-direction:column; /* column | row */ }
更新 – 另一个解决scheme
这是来自zerosixree ，让你用CSS的6行中心任何东西
IE8 and lower不支持此方法
的jsfiddle
HTML
<ul> <li> <p>Some Text</p> </li> <li> <p>A bit more text that goes on 2 lines</p> </li> <li> <p>Even more text that demonstrates how lines can span multiple lines</p> </li> </ul>
CSS
p { text-align: center; position: relative; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
以前的答案
简单和跨浏览器的方法，作为标记的答案中的链接有用，稍微过时。
如何在无序列表和div中垂直和水平居中文本，而不使用JavaScript或css行高 。 无论你有多less文本，你都不需要将特殊的类应用到特定的列表或div（代码是相同的每个）。 这适用于所有主stream浏览器，包括IE9，IE8，IE7，IE6，Firefox，Chrome，Opera和Safari。 有2个特殊的样式表（1个用于IE7，另一个用于IE6），由于他们现代浏览器没有的css限制，帮助他们。
安迪霍华德 – 如何垂直和水平居中文本在一个无序的列表或div
编辑：因为我没有太在意我最后一个项目的IE7 / 6，我用了一个稍微剥离的版本（即删除的东西，使其工作在IE7和6）。 可能对其他人有用…
的jsfiddle
HTML
<ul> <li> <div class="outerContainer"> <div class="innerContainer"> <div class="element"> <p><!-- Content --></p> </div> </div> </div> </li> <li> <div class="outerContainer"> <div class="innerContainer"> <div class="element"> <p><!-- Content --></p> </div> </div> </div> </li> </ul>
而CSS：
.outerContainer { display: table; width: 100px; /* width of parent */ height: 100px; /* height of parent */ overflow: hidden; } .outerContainer .innerContainer { display: table-cell; vertical-align: middle; width: 100%; margin: 0 auto; text-align: center; } li { background: #ddd; width: 100px; height: 100px; }
我使用下面的内容轻松地垂直居中随机元素：
HTML：
<div style="height: 200px"> <div id="mytext">This is vertically aligned text within a div</div> </div>
CSS：
#mytext { position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); }
这将我的div的文本集中到200px高的外部div的精确垂直中间。 请注意，您可能需要使用浏览器前缀（如我的例子中的-webkit- ）才能使其适用于您的浏览器。
这不仅适用于文本，而且适用于其他元素。
使用display: flex很容易。 所有的文本div都是垂直居中的：
div { display: flex; align-items: center; }
如果你想，水平：
div{ display: flex; align-items: center; justify-content: center; }
你必须看到你需要的浏览器版本; 在旧版本中，它不起作用。
您可以通过将显示设置为“table-cell”并应用vertical-align：middle;
{ display:table-cell; vertical-align:middle; }
但是，这并不是所有版本的Internet Explorer都支持的，根据我从http://www.w3schools.com/cssref/pr_class_display.asp复制的摘录未经许可。;
注意： “inline-table”，“table”，“table-caption”，“table-cell”，“table-column”，“table-column-group”，“table-row”，“table-row “组”和“inheritance”不支持IE7和更早版本。 IE8需要！DOCTYPE。 IE9支持这些值。
下表显示了http://www.w3schools.com/cssref/pr_class_display.asp中允许的显示值。; 我希望这有帮助
这是我最喜欢的解决scheme（支持简单和非常好的浏览器）：
div{ margin:5px; text-align:center; display:inline-block; } .vcenter{ background:#eee; width: 150px; height: 150px; } .vcenter:before { content: " "; display: inline-block; height: 100%; vertical-align: middle; max-width: 0.001%; /* Just in case the text wrapps, you shouldn't notice it */ } .vcenter :first-child { display:inline-block; vertical-align:middle; max-width: 99.999%; }
<div class="vcenter"> <p>This is my Text</p> </div> <div class="vcenter"> <p>This is my Text<br />Text</p> </div> <div class="vcenter"> <p>This is my Text<br />Text<br />Text</p> </div>
这是一个最适合单行文本的解决scheme。
如果行数已知，它也可以用于多行文本
.testimonialText{ font-size:1em;/*Set a font size*/ } .testimonialText:before {/*add a pseudo element*/ content:""; display:block; height:50%; margin-top:-0.5em;/*half of the font size*/ }
这是一个JSFiddle
<!DOCTYPE html> <html> <head> <style> .container{ height:250px; background:#f8f8f8; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; align-items: center; -webkit-box-align: center; justify-content: center; } p{ font-size:24px;} </style> </head> <body> <div class="container"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </body> </html>
查看这个简单的解决
HTML
<div class="block-title"><h3>I'm a vertically centered element</h3></div>
CSS
.block-title { float:left; display:block; width:100%; height:88px } .block-title h3 { display:table-cell; vertical-align:middle; height:inherit }
的jsfiddle
有一个简单的方法来垂直alignment内容，而不依靠table / table-cell：
在其中我添加了一个不可见的（width = 0）div，它假定了容器的整个高度。
它似乎工作在IE和FF（最新版本），没有与其他浏览器检查
<div class="t"> <div> everything is vertically centered in modern IE8+ and others. </div> <div></div> </div>
当然CSS：
.t, .t > div:first-child { border:1px solid green; } .t { height:400px; } .t > div { display:inline-block; vertical-align:middle } .t > div:last-child { height:100%; }
这是我find的最干净的解决scheme（IE9 +），并通过使用其他答案已省略的transform-style为“off by .5 pixel”问题添加了一个修复程序。
.parent-element { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .element { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
资料来源：http: //zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
简单的解决scheme，不知道价值的元素
HTML
<div class="main"> <div class="center"> whatever </div> </div>
CSS
.main { position: relative } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); }
您可以使用弹性盒在一个div内垂直alignment中心文字。
<div> <p class="testimonialText"> This is the testimonial text. </p> </div> div { display: flex; align-items: center; }
您可以通过以下链接了解更多信息： https : //css-tricks.com/snippets/css/a-guide-to-flexbox/
使用flex请注意浏览器渲染的差异。
这对于Chrome和IE来说都很好：
.outer { display: flex; width: 200px; height: 200px; background-color: #ffc; } .inner { display: flex; width: 50%; height: 50%; margin: auto; text-align: center; justify-content: center; align-items: center; background-color: #fcc; }
<div class="outer"><div class="inner">Active Tasks</div></div>
根据Adam Tomat的回答，准备了一个jsfiddle 例子来alignmentdiv中的文本
<div class="cells-block"> text<br/>in the block </div>
在CSS中使用display：flex
.cells-block { display: flex; flex-flow: column; align-items: center; /* vertically */ justify-content: flex-end; /* horisontally */ text-align: right; /* addition: for text's lines */ }
在另一个例子中 ，在博客中很less有解释。
HTML
<div class="relative"><!--used as a container--> <!-- add content here to to make some height and width example:<img src="" alt=""> --> <div class="absolute"> <div class="table"> <div class="table-cell"> Vertical contents goes here </div> </div> </div> </div>
CSS
.relative{ position:relative; } .absolute{ position:absolute; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,0.5); } .table{ display:table; height:100%; width:100%; text-align:center; color:#fff; } .table-cell{ display:table-cell; vertical-align:middle; }
这是在div中使用calc()在CSS中div另一种变化。
<div style="height:300px; border:1px solid green;"> Text in outer div. <div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)"> Text in inner div. </div> </div>
这工作，因为：
-
position:absolutediv精确位置的position:absolute - 我们知道内部
div的高度，因为我们将其设置为20px。 -
calc(50% - 10px)为50％ –为内部div中心高度的一半
尝试embedded一个表格元素。
<div> <table style='width:200px; height:100px;'> <td style='vertical-align:middle;'> copenhagen </td> </table> </div>
嗯，显然有很多方法可以解决这个问题。
但是我有一个绝对定位的<div> ， height:100% （实际上， top:0;bottom:0和固定宽度），而display:table-cell只是不能使文本垂直居中。 我的解决scheme确实需要一个内部span元素，但是我看到很多其他的解决scheme也是这样做的，所以我不妨添加它：
我的容器是一个.label ，我想要数字垂直居中。 我把它定位在top:50% ，设置line-height:0
<div class="label"><span>1.</span></div>
而CSS如下：
.label { position:absolute; top:0; bottom:0; width:30px; } .label>span { position:absolute; top:50%; line-height:0; }
看到它的行动： http : //jsfiddle.net/jcward/7gMLx/
在Div的中心显示内容/图像有几个技巧 。 一些答案是非常好的，我也完全同意这些。
CSS中的绝对水平和垂直居中
例子有10多种技术 。 现在取决于你的喜好。
毫无疑问， display:table; display:table-Cell display:table; display:table-Cell是一个更好的伎俩。
一些好的技巧如下：
技巧1 – 通过使用display:table; display:table-cell display:table; display:table-cell
HTML
<div class="Center-Container is-Table"> <div class="Table-Cell"> <div class="Center-Block"> CONTENT </div> </div> </div>
CSS代码
.Center-Container.is-Table { display: table; } .is-Table .Table-Cell { display: table-cell; vertical-align: middle; } .is-Table .Center-Block { width: 50%; margin: 0 auto; }
技巧2 – 通过使用display:inline-block
HTML
<div class="Center-Container is-Inline"> <div class="Center-Block"> CONTENT </div> </div>
CSS代码
.Center-Container.is-Inline { text-align: center; overflow: auto; } .Center-Container.is-Inline:after, .is-Inline .Center-Block { display: inline-block; vertical-align: middle; } .Center-Container.is-Inline:after { content: ''; height: 100%; margin-left: -0.25em; /* To offset spacing. May vary by font */ } .is-Inline .Center-Block { max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */ /* max-width: calc(100% - 0.25em) /* Only for IE9+ */ }
窍门3 – 通过使用position:relative;position:absolute
<div style="position: relative; background: #ddd; border: 1px solid #ddd; height: 250px;"> <div style="width: 50%; height: 60%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ccc; text-align: center;"> <h4>ABSOLUTE CENTER,<br> WITHIN CONTAINER.</h4> <p>This box is absolutely centered, horizontally and vertically, within its container</p> </div> </div>
CSS：
.vertical { display: table-caption; }
将此类添加到包含要垂直alignment的元素的元素
如果您需要使用min-height属性，则必须在以下位置添加此CSS：
.outerContainer .innerContainer { height: 0; min-height: 100px; }
