CSS中心显示内联块？

Question

我在这里有一个有效的代码：（您可能需要将结果窗口放大以查看居中对齐效果）

题

该代码工作正常，但我不喜欢这样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的justify-content和align-items属性，分别允许您将元素水平和垂直居中。通过将两者都设置center为父元素，子元素（甚至多个元素！）将完美地位于中间。

此解决方案不需要固定的宽度，这对我来说不合适，因为我的按钮文本会更改。

这是CodePen演示和以下相关代码的片段：

.parent {

  display: flex;

  justify-content: center;

  align-items: center;

}



.child {

  display: inline-block;

}


<div class="parent">

  <a class="child" href="#0">Button</a>

</div>