如何在其父级中准确地居中内容？

Question

为了更好地理解 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>

Answer 1

我非常有信心以下是将任何内容垂直居中的最佳方式。这意味着您根本不需要关心 parent 的大小、child 的大小或任何其他内容。说真的。

Fiddle: http://jsfiddle.net/h1zd0z5c/5/

这里的主要技巧是：使 child display: inline-block!!!!! 正如您将看到的，这将有助于沿两个轴居中。

它有两个不同的方面：

1) 水平居中

超级简单！因为 child 是 inline-block，所以我们需要做的就是在 parent.

上设置 text-align: center

2) 垂直居中

这是棘手的部分。我们将在 child 上使用 vertical-align: middle 来完成此操作。听起来它应该完全按照我们的意愿行事，不是吗？然而这里有一个陷阱，这是我经常遇到的 css 最难理解的方面之一：vertical-align 与 parent 的大小无关 -它是相对于最高的兄弟姐妹！

所以解决这个问题的方法是确保 child 元素始终有一个 height: 100% 元素，这样最高的兄弟元素的高度与 [=] 元素的高度相同63=]。就个人而言，我发现实现此目的最优雅的方法是利用 before pseudo-selector (https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Abefore) 在 parent 中插入 100% 高度的内容。

查看 fiddle - 它为您留下了 2 个高度可重用的类，只需将其应用于 parent 和 child 元素； .centered-content 和 .centered-content > .content 元素。

备注

您要求将 ul 元素居中，这没问题，但请注意，在示例中我决定删除 ul 的填充 - 这是因为 ul元素有相当大的 left-padding 这导致它们看起来好像没有居中，即使它们确实居中。

Answer 2

使用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>

如何在其父级中准确地居中内容？

How to exactly center content within it's parent?

html

css

center

margin

1) 水平居中

2) 垂直居中

备注