Question

我在这里有一个工作代码：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

试试这个。我将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;
}

Answer 2

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

Answer 3

接受的解决方案对我不起作用，因为我需要一个display: inline-block的子元素在100％宽度的父级中水平和垂直居中。

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

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

Here is a CodePen demo以及以下相关代码的片段：

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

你也可以通过定位，将父div设置为relative和child div设置为absolute。

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

Answer 5

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

  display: inline-block;
  position: relative;
  // Move the element to the left 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%);

Answer 6

我刚刚更改了2个参数：

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

Live Demo

Answer 7

您不需要使用“display：table”。您的保证金：0自动居中尝试不起作用的原因是您没有指定宽度。

这样可以正常工作：

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

您不需要指定display：block，因为默认情况下该div将被阻止。你也可能失去溢出：隐藏。

Answer 8

很棒的文章我发现对我来说最有效的是增加一个％的大小

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

Answer 9

只需使用：

line-height:50px

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

CSS中心显示内联块？

9 个答案: