我这里有一个有效的代码:http://jsfiddle.net/WVm5d/(您可能需要将结果窗口放大才能看到居中对齐效果)

Question

代码很好用,但我不喜欢display: table;.这是我唯一能让包裹类对齐中心的方法.我认为如果有办法使用display: block;display: inline-block;会更好.有没有可能用另一种方法求解"对齐中心"?

对我来说,向容器中添加固定with不是一个选项.

I will also paste my code here if the JS Fiddle link gets broken in the future:

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的子元素在display: inline-block%宽度的父元素中水平和垂直居中.

我使用了Flexbox的justify-contentalign-items属性,它们分别允许您将元素水平和垂直居中.通过在父元素上将两者都设置为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>

Css相关问答推荐

为什么我的 CSS 需要一个它似乎不需要的大括号?

CSS 常量()用于什么?

在嵌套的弹性框中创建弹性项目之间的空间

弹簧靴.一个文件捕获 CSS 其他没有

在样式化组件中使图像重叠

基于类的 CSS 选择器

调整屏幕大小时无法让我的视频背景保持不变

如何在 Vue.js 中使用 /deep/ 或 >>> 或 ::v-deep?

为什么只为第一个元素显示双引号?

使用 JavaScript 将 CSS 添加到?

如何使用 classes props 在 Material UI 中添加多个类?

从 javascript 访问 CSS 变量

CSS本机变量在媒体查询中不起作用

限制 Chart.js 折线图上的标签数量

表列大小

模拟显示:React Native 中的内联

flex-start 和基线有什么区别?

如何使用 node-sass(无 Ruby)编译或转换 sass / scss 为 css?

为什么在 CSS3 中启用硬件加速会降低性能?

是否有与 :hover 相对的 CSS 伪类?