为了更好地理解今天我做了一些运动的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>
答案 0 :(得分：1)
我非常有信心以下是垂直居中的最佳方式。这意味着您不需要关心父母的体型，孩子的体型或任何事物。严重。
小提琴：http://jsfiddle.net/h1zd0z5c/5/
这里的主要技巧是：让孩子display: inline-block !!!!!
正如您所知，这将有助于沿两个轴居中。
它有两个不同的方面：
超级简单！因为子项是内联块，所以我们需要做的就是在父项上设置text-align: center。
这是棘手的部分。我们将在孩子身上使用vertical-align: middle来实现这一目标。听起来它应该完全符合我们的要求，不是吗？然而，这里有一个问题，这是我经常遇到的css中最难理解的方面之一： vertical-align与父母的大小无关 - 它＆＆ ＃39;相对于最高的兄弟姐妹！
因此，解决这个问题的方法是确保子元素始终具有height: 100%的兄弟元素，以便最高兄弟的高度与父元素的高度相同。就个人而言，我发现最优雅的方法是利用before伪选择器（https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Abefore）在父级中插入100％的高度内容。
查看小提琴 - 它为您提供了2个高度可重用的类，只需要应用于父元素和子元素; .centered-content和.centered-content > .content元素。
您要求将ul元素置于中心位置没有问题，但请注意，在示例中我决定删除ul的填充 - 这是因为{{1}元素有一个相当大的左边填充，这使得它们看起来好像它们没有居中，即使它们确实存在。
答案 1 :(得分：0)
使用text-align属性。刚把它添加到#first li的css中
#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;
text-align: center;
}
#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>