CSS如何让display:inline-block元素居中显示？

Question

这里有一个可用的代码：http://jsfiddle.net/WVm5d/（你可能需要将结果窗口调大以查看居中效果）

问题

代码能够正常工作，但我不喜欢使用display: table;。这是我使wrap-class对齐居中的唯一方法。我认为如果能够使用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>

- Jens Törnell

Answer 1

尝试这个。我在 body 中添加了 text-align: center，在 wrap 中添加了 display:inline-block，然后删除了你的 display: table。

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

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

- Bazzz

---

@zack 当以内联块显示时，divs的表现类似于文本。您也可以在它们上面使用white-space: nowrap;等属性。 - User2

如果我不想让body中的所有元素都居中对齐，怎么办？这听起来对我来说有点过度了。 - phil294

请为内联块元素添加块级包装器，然后设置CSS属性text-align:center;。他的示例中使用了body标签。 - Arsalan Sheikh

Answer 2

对我来说，接受的解决方案行不通，因为我需要一个具有display: inline-block的子元素在100％宽度的父元素内水平和垂直居中。

我使用了Flexbox的justify-content和align-items属性，分别允许您水平和垂直地居中元素。通过在父元素上将两者都设置为center，子元素（甚至多个元素！）将完美地居中。

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

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

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

- EdA

---

这个问题是在 Flexbox 出现之前创建的，但现在这种方法更好，所以我接受它作为答案。 - Jens Törnell

@JensTörnell 在这种情况下使用inline-block是无用的，可以将其删除。 - Temani Afif

这比使用文本居中要好得多。那种实现方式会将文本居中泄漏到所有子组件中。不要这样做。 - html_programmer

@TemaniAfif是正确的 - 谢谢。我不需要在那里有一个display: inline-block;规则（我认为它是必不可少的，但实际上并不是），所以我已经将其删除了。 - EdA

这不再是一个内联块了吧？它正在居中一个弹性项目，这是完全不同的问题。 - Logan Cundiff

@LoganCundiff 我原来的答案在子元素上有 display: inline-block，但是有评论指出这是不必要的。我认为 OP 真正想要的是垂直和水平居中，无论如何都可以实现。子元素仍然可以显示为 inline-block。 - EdA

Answer 3

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

- Spudley

---

关于display:inline元素怎么样？我测试了一下，它的工作方式不符合我的预期。 - geckob

Answer 4

这将水平居中一个内联块元素，而无需修改其父元素的样式：

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

- CodeBiker

Answer 5

你也可以使用定位来实现这一点，将父级 div 设置为相对定位，将子级 div 设置为绝对定位。

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

- vijayscode

Answer 6

你不需要使用"display: table"。你的margin: 0 auto居中尝试失败的原因是因为你没有指定宽度。

这样做就可以了：

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

由于该div默认为块级元素，因此您无需指定display: block。您可能还可以去掉overflow: hidden。

- user2166297

Answer 7

我只是改变了2个参数：

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

现场演示

- Myles Gray

---

对我来说，设置固定宽度不是一个选项。找到了另一个解决方案。无论如何还是谢谢。 - Jens Törnell

那么它是什么？ - RichieHH

这不是内联块的响应式居中。 - daniel souza

Answer 8

很棒的文章，我发现对我最有效的方法是将尺寸加上 % 符号。

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

- Mitch

Answer 9

只需使用：

line-height:50px

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

- user2694412

---

请明确要在哪里添加 line-height。 - Marcel Gwerder

原始问题是关于水平居中的，这可以通过使用 text-align: center; 来实现。调整行高是垂直居中的一种解决方案，但对于内联块来说并不是非常稳健的解决方案。 - cdaddr

这甚至没有关联。 - tree