div垂直alignment中间的CSS
我试图让我的文本垂直alignment到abc div div的中间。
我想保持在50px的高度和文本垂直alignment在div的中间。
我还没有find解决这个问题的办法，也许我不是在寻找正确的东西。
body{ padding: 0; margin: 0; margin: 0px auto; } #main{ position: relative; background-color:blue; width:500px; height:500px; } #abc{ font:Verdana, Geneva, sans-serif; font-size:18px; text-align:left; background-color:#0F0; height:50px; vertical-align:middle; } <div id="main"> <div id="abc"> asdfasdfafasdfasdf </div> </div>
你可以使用line-height: 50px; ，你将不需要vertical-align: middle; 那里。
演示
如果你有多行，上面的代码会失败，所以在这种情况下，你可以用span来包装你的文本，而不是使用display: table-cell; 并display: table; 与vertical-align: middle; ，也不要忘记使用width: 100%; 为#abc
演示
#abc{ font:Verdana, Geneva, sans-serif; font-size:18px; text-align:left; background-color:#0F0; height:50px; display: table; width: 100%; } #abc span { vertical-align:middle; display: table-cell; }
我能想到的另一个解决scheme是使用translateY() transform属性，其中Y显然代表Y轴。 这是非常简单的…所有你需要做的是将元素的位置设置为absolute和后来位置从top 50% ，并从它的轴平移负-50%
div { height: 100px; width: 100px; background-color: tomato; position: relative; } p { position: absolute; top: 50%; transform: translateY(-50%); }
演示
请注意，旧版浏览器（例如IE8）不支持此function，但是您可以分别使用-ms, -moz和-webkit前缀来制作IE9及Chrome和Firefox的其他旧浏览器版本。
有关transform更多信息，请参阅此处 。
这很简单：给父母的div这个：
display: table;
并给这个孩子分区：
display: table-cell; vertical-align: middle;
而已！
.parent{ display: table; } .child{ display: table-cell; vertical-align: middle; padding-left: 20px; }
<div class="parent"> <div class="child"> Test </div> <div class="child"> Test Test Test <br/> Test Test Test </div> <div class="child"> Test Test Test <br/> Test Test Test <br/> Test Test Test </div> <div>
我通过SebastianEkströmfind了这个解决scheme。 它很快，很脏，而且工作得很好。 即使你不知道父母的身高：
.element { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
阅读完整的文章在这里 。
老问题，但现在 CSS3使垂直alignment非常简单 ！
只需添加到#abc下面的CSS：
display:flex; align-items:center;
简单的演示
原始问题演示更新
简单的例子：
.vertical-align-content { background-color:#f18c16; height:150px; display:flex; align-items:center; /* Uncomment next line to get horizontal align also */ /* justify-content:center; */ }
<div class="vertical-align-content"> Hodor! </div>
您可以使用Line height作为div的高度。 但对我来说最好的解决办法是这样的 – > position:relative; top:50%; transform:translate(0,50%); position:relative; top:50%; transform:translate(0,50%);
如何增加line-height ？
#abc{ font:Verdana, Geneva, sans-serif; font-size:18px; text-align:left; background-color:#0F0; height:50px; vertical-align:middle; line-height: 45px; }
小提琴，线条高度
或者在#abc上#abc 。 这是填充的结果
更新
join你的CSS：
#abc img{ vertical-align: middle; }
结果 。 希望这个你在找什么。
尝试这个：
.main_div{ display: table; width: 100%; } .cells { display: table-cell; vertical-align: middle; }
另一种居中div的方法：
<div id="parent"> <div id="child">Content here</div> </div> #parent {position: relative;} #child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 50px; height: 100px; margin: auto; }
