CSS中心显示内联块？

Question

CSS中心显示内联块？

我在这里有一个工作代码：http：//jsfiddle.net/WVm5d/（你可能需要让结果窗口更大才能看到对齐中心效果）

题

代码工作正常，但我不喜欢display: table;。这是我制作包装类对齐中心的唯一方法。我认为如果有一种方法可以使用display: block;或更好display: inline-block;。是否有可能以另一种方式解决对中中心？

添加固定的容器对我来说不是一个选择。

如果JS Fiddle链接在未来被破坏，我也会在此处粘贴我的代码：

body {
    background: #bbb;}.wrap {
    background: #aaa;
    margin: 0 auto;
    display: table;
    overflow: hidden;}.sidebar {
    width: 200px;
    float: left;
    background: #eee;}.container {
    margin: 0 auto;
    background: #ddd;
    display: block;
    float: left;
    padding: 5px;}.box {
    background: #eee;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 5px;
    float: left;}.box:nth-child(3n+1) {
    clear: left;}

<div class="wrap">
    <div class="sidebar">
        Sidebar    </div>
    <div class="container">
        <div class="box">
            Height1        </div>
        <div class="box">
            Height2<br />
            Height2        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3        </div>
        <div class="box">
            Height1        </div>
        <div class="box">
            Height2<br />
            Height2        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3        </div>
    </div>
    <div class="sidebar">
        Sidebar    </div></div>

Answer 1

接受的解决方案对我不起作用，因为我需要一个子元素，display: inline-block在100％宽度父级中水平和垂直居中。我使用了Flexbox&nbsp;justify-content和align-items属性，它们分别允许您水平和垂直居中元素。通过将两者都设置center为父元素，子元素（甚至多个元素！）将完全位于中间。这个解决方案不需要固定的宽度，这对我来说是不合适的，因为我的按钮的文本会改变。这是CodePen演示和以下相关代码的片段：.parent&nbsp;{ &nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;justify-content:&nbsp;center; &nbsp;&nbsp;align-items:&nbsp;center;}.child&nbsp;{ &nbsp;&nbsp;display:&nbsp;inline-block;}<div&nbsp;class="parent"> &nbsp;&nbsp;<a&nbsp;class="child"&nbsp;href="#0">Button</a></div>

Answer 2

如果你有一个<div>with&nbsp;text-align:center;，那么其中的任何文本都将相对于该容器元素的宽度居中。inline-block为此目的，元素被视为文本，因此它们也将居中。