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>

可接受的解决方案对我而言不起作用，因为我需要一个子元素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>

试试这个。我添加text-align: center到身体并display:inline-block包裹，然后删除了display: table

body {
    background: #bbb;
    text-align: center;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
}

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

您也可以通过定位来实现，将父div设置为相对，子div设置为绝对。

.wrapper {
      position: relative;
  }
.childDiv {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
  }

您无需使用“ display：table”。边距：0自动居中尝试不起作用的原因是，您未指定宽度。

这将正常工作：

.wrap {
    background: #aaa;
    margin: 0 auto;
    width: some width in pixels since it's the container;
}

您无需指定display：block，因为该div默认情况下会被阻止。您也可能会丢失溢出：隐藏。

与@vijayscode的答案类似，这将使inline-block元素水平居中（但也无需修改其父代的样式）：

  display: inline-block;
  position: relative;
  left: 50%; // Move the element to the left by 50% of the container's width
  transform: translateX(-50%); // Calculates 50% of the element's width and moves it by that amount across the X-axis to the left

我刚刚更改了2个参数：

.wrap {
    display: block;
    width:661px;
}

现场演示

很棒的文章，我发现最适合我的是将大小增加％

.wrap {
margin-top:5%;
margin-bottom:5%;
height:100%;
display:block;}

只需使用：

line-height:50px

将“ 50px”替换为与div相同的高度。