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

Answer 2

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