Make a DIV vertically align in a middle

Question

I have to make something like columns, but without table. This is example code:

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

.left is on a left side, .center is in the middle and .right should be on a right side. But, .center should be also vertically aligned to the middle. Here is example and CSS example: jsFiddle

Answer 1

Wrap the actual elements is a table-cell:

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 demo: http://jsfiddle.net/3728vxa9/2/

Answer 2

Depending on if the height of the center element is in pixels or percent, you can place a div on top and below it. For instance, if it's height is 50 percent, place a div above and below it, each with a height of 25 percent.

HTML will look like this

<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 will look like this

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

Answer 3

Here are two examples of ways in which you could align a div in the middle:

Using HTML:

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

Styling in a separate CSS file:

.center { margin: 0 auto; }

---

If you are making three columns and want them to resize according to the window width, you set the value of their width to be 33%. Here is an example:

.center {
    width: 33%;
}

.left {
    width: 33%;
}

.right {
    width: 33%;
}

Answer 4

Please see this link, 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;     
    }
}

I wish this help you