为了更好地理解 css 框模型，我今天做了一些练习。 我的目标是将无序列表准确地置于其父 div 的中心。我知道我必须手动设置宽度才能使用 margin 0 auto，但如您所见，无序列表并未完全与段落文本居中，因为 li 元素的宽度为 80%。 是否有机会自动将宽度设置为最长的 li 元素，还是我必须尝试手动将宽度设置为尽可能接近文本结尾？
我希望你们知道我在这里试图解释的内容 :D
代码如下:
#wrapper {
border: 5px solid black;
width: 50%;
margin: 0 auto;
}
#first {
box-sizing: border-box;
border: 5px solid black;
width: 50%;
margin: 10px auto;
padding: 0;
padding-top: 10px;
padding-bottom: 10px;
list-style: none;
}
#first li {
border: 2px solid green;
width: 80%;
margin: 0 auto;
white-space: nowrap;
}
#second {
list-style: none;
padding: 0;
border: 2px solid pink;
width: 50%;
margin: 0 auto;
}
#second li {
border: 2px solid blue;
margin: 0 auto;
} <body>
<div id="wrapper">
<ul id="first">
<li>Item 1</li>
<ul id="second">
<li>Item 1.1</li>
</ul>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<p>Retro 3 wolf moon DIY, crucifix letterpress literally ethical. Brunch ethical shabby chic mumblecore, cronut ramps cred. Single-origin coffee marfa helvetica heirloom, cold-pressed flexitarian tumblr vinyl pop-up mlkshk cronut direct trade twee brunch. Ramps beard roof party, echo park whatever bespoke direct trade seitan. Etsy small batch dreamcatcher, photo booth fashion axe tilde fixie sriracha hammock beard squid craft beer. Banh mi yr green juice, truffaut DIY crucifix chartreuse tacos hoodie readymade vinyl occupy four loko try-hard. Retro knausgaard paleo, tousled blue bottle cornhole letterpress.
</p>
</div>
</body>最佳答案
我非常有信心以下是将任何内容垂直居中的最佳方式。这意味着您根本不需要关心父项的大小、子项的大小或任何其他内容。说真的。
fiddle :http://jsfiddle.net/h1zd0z5c/5/
这里的主要技巧是:让 child display: inline-block!!!!!
正如您将看到的，这将有助于沿两个轴居中。
它有两个不同的方面:
1) 水平居中
super 简单!因为 child 是内联 block ，所以我们需要做的就是在父级上设置 text-align: center。
2) 垂直居中
这是棘手的部分。我们将对 child 使用 vertical-align: middle 来完成此操作。听起来它应该完全按照我们的意愿行事，不是吗？然而，这里有一个陷阱，这是我经常遇到的 css 最难理解的方面之一:vertical-align 与父级的大小无关 - 它与最高的 sibling 相关!
所以解决这个问题的方法是确保子元素始终有一个 height: 100% 的兄弟元素，这样最高的兄弟元素的高度与父元素的高度相同。就我个人而言，我发现实现此目的最优雅的方法是利用 before 伪选择器 ( https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Abefore ) 在父级中插入 100% 高度的内容。
查看 fiddle - 它为您留下了 2 个高度可重用的类，只需将它们应用于父元素和子元素； .centered-content 和 .centered-content > .content 元素。
注意事项
您要求将 ul 元素居中，这没问题，但请注意，在示例中我决定删除 ul 的填充 - 这是因为 ul 元素有相当多的左填充，这导致它们看起来好像没有居中，即使它们实际上是居中的。
关于html - 如何准确地将内容置于其父级的中心？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33506090/