Html 在 DIV 内垂直居中 UL
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6053592/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertically centering a UL inside a DIV
提问by Robert Wagner
I have the following:
我有以下几点：
<div style="background: Red; height: 100px;">
<ul>
<li><a href="/">Home</a></li>
</ul>
</div>
I would like to vertically center the ul in the div but I'm not sure how. Fiddle demoCan anyone advise me on this.
我想将 ul 在 div 中垂直居中，但我不确定如何。 小提琴演示谁能就此给我建议。
Marilou
马里卢
采纳答案by Jonathan
CSS does not support vertical centering of arbitrary block elements. However, there are many "hacks" that will let you "make it work".
CSS 不支持任意块元素的垂直居中。但是，有许多“技巧”可以让您“让它发挥作用”。
You can set the parent div to display:inline. However, you will then have issues with your height and background color.
您可以将父 div 设置为 display:inline。但是，您的高度和背景颜色会出现问题。
W3C Link: http://www.w3.org/wiki/CSS/Properties/vertical-align
W3C 链接：http: //www.w3.org/wiki/CSS/Properties/vertical-align
One hack that will do it: (has a great explanation too) http://phrogz.net/css/vertical-align/index.html
一个可以做到的黑客：（也有很好的解释）http://phrogz.net/css/vertical-align/index.html
回答by Code Maverick
You could always use display: table-cell;in combination with vertical-align: middle;:
您始终可以display: table-cell;与 结合使用vertical-align: middle;：
HTML:
HTML：
<div>
<ul>
<li><a href="/">Home</a></li>
</ul>
</div>
CSS:
CSS：
div {
background: red;
height: 100px;
width: 500px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
回答by devgp
Use the CSS position property
使用 CSS 位置属性
#ulid{position:relative; top:50%; left: 50%;}
pass the id to ul
<ul id="ulid">
回答by mg1075
You could try something like this: http://jsfiddle.net/S8cj5/
你可以尝试这样的事情：http: //jsfiddle.net/S8cj5/
Adding an inner span prior to the <li> inner text is something I've found quite useful in the past for vertically positioning an <li>.
在 <li> 内部文本之前添加一个内部跨度是我过去发现对于垂直定位 <li> 非常有用的东西。
