使DIV在中间垂直对齐

Question

我必须制作类似列的内容，但没有表格。 这是示例代码：

<div class="main">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
    <div class="endfloat"></div>
</div>

.left位于左侧， .center位于中间，而.right应该位于右侧。 但是， .center也应该垂直对齐中间。 这是示例和CSS示例： jsFiddle

Answer 1

包装实际元素是一个表格单元：

的HTML

<div class="main">
    <div class="table-cell">
        <div class="left"></div>
    </div>
    <div class="table-cell">
        <div class="center"></div>
    </div>
    <div class="table-cell">
        <div class="right"></div>
    </div>
</div>

SCSS

@mixin defaultDiv($bg, $height: 300px) {
    width: 200px;
    height: $height;
    background-color: $bg;
    display: table-cell;
}

.main {
    outline: 1px solid red;
    width: 600px;
    display: table;

    .table-cell {
        display: table-cell; 
        width: 200px;
        vertical-align: middle;
    }

    .left {
        @include defaultDiv(green);
    }
    .center {
        @include defaultDiv(blue, 200px);
    }
    .right {
        @include defaultDiv(yellow, 250px);
    }
}

JSFiddle演示： http : //jsfiddle.net/3728vxa9/2/

Answer 2

根据中心元素的高度是像素还是百分比，可以在其顶部和下方放置一个div。 例如，如果高度为50％，则在其上方和下方放置一个div，每个div的高度为25％。

HTML将如下所示

<div class="main">
  <div class="left"></div>
  <div class="centerTop"></div>
  <div class="center"></div>
  <div class="centerBottom"></div>
  <div class="right"></div>
  <div class="endfloat"></div>
</div>

CSS将如下所示

.centerTop {
    height: 25%
}
.center {
    height: 50%
}
.centerBottom {
    height: 25%
}

Answer 3

以下是两个可以在中间对齐div的方法的示例：

使用HTML：

<div class="center" style="margin: 0 auto;"></div>

在单独的CSS文件中进行样式设置：

.center { margin: 0 auto; }

---

如果要制作三列，并希望它们根据窗口宽度调整大小，则将其宽度的值设置为33％。 这是一个例子：

.center {
    width: 33%;
}

.left {
    width: 33%;
}

.right {
    width: 33%;
}

Answer 4

请参阅此链接， http：//jsfiddle.net/n6t3qrux/

@mixin defaultDiv($bg, $height: 300px) {
    float: left;
    width: 200px;
    height: 300px;
    background-color: $bg;
}

.main {
    outline: 1px solid red;
    width: 600px;
    height: 300px;
    position: relative;

    .left {
        @include defaultDiv(green);
        margin: auto;
        position: absolute;
        left: 0;
        top: 0;
    }
    .center {
        @include defaultDiv(blue, 200px);
        margin: auto;
        position: absolute;
        left:0;
        right: 0;
        top: 0;
        bottom: 0; 
        height: 200px;
    }
    .right {
        @include defaultDiv(yellow, 250px);
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
    }
    .endfloat {
        clear: both;     
    }
}

希望对您有帮助