CSS居中显示内嵌块？
我在这里有一个有效的代码：http://jsfiddle.net/WVm5d/ (您可能需要将结果窗口放大才能看到对齐中心的效果)
问题
代码运行良好，但我不喜欢使用display: table;。这是我能让包装类居中对齐的唯一方法。我认为如果有一种方法可以使用display: block;或display: inline-block;，那会更好。是否可以用另一种方法解决对齐中心问题？
向容器添加一个固定的with对我来说不是一个选择。
如果将来JS 链接被破坏，我还会将代码粘贴到这里：
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>
回答 9
Stack Overflow用户
发布于 2018-03-16 01:38:27
被接受的解决方案对我不起作用，因为我需要一个带有display: inline-block的子元素在一个100%宽度的父元素中同时水平和垂直居中。
我使用了Flexbox的justify-content和align-items属性，它们分别允许您将元素水平和垂直居中。通过在父元素上将both设置为center，子元素(甚至是多个元素！)将会完美地处于中间。
这个解决方案不需要固定的宽度，这对我来说是不合适的，因为我的按钮的文本会发生变化。
Here is a CodePen demo和下面的相关代码片段：
.parent {
display: flex;
justify-content: center;
align-items: center;
}<div class="parent">
<a class="child" href="#0">Button</a>
</div>
Stack Overflow用户
发布于 2011-02-13 05:00:51
尝尝这个。我在body中添加了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;
}Stack Overflow用户
发布于 2011-02-13 05:00:41
如果您有一个带有text-align:center;的<div>，那么其中的任何文本都将相对于该容器元素的宽度居中。为此，inline-block元素被视为文本，因此它们也将居中。
https://stackoverflow.com/questions/4980525
复制相似问题