This question already has an answer here:

How to vertically center a div for all browsers? 41 answers

---

Live Demo

I just made a jsFiddle showing my suggestion to a solution. Here I take into account that you want two <div> s filling 50% of the width each, 100% height, and that you want the content to be vertically aligned in the middle. Here is the simplified working solution with source code.

HTML

<div id="outer">
    <div id="table-container">
        <div id="table-cell">
            This content is vertically centered.
        </div>
    </div>
</div>

CSS

#outer {
    position:absolute;
    top:0;
    left:0;
    width:50%;
    height:100%;
}

#table-container {
    height:100%;
    width:100%;
    display:table;
}

#table-cell {
    vertical-align:middle;
    height:100%;
    display:table-cell;
    border:1px solid #000;
}

For reference, I used this tutorial.

---

position: absolute;
top: 0;
bottom: 0;

Will give you a box that fills to 100% height. Make sure your HTML and BODY tags are large enough:

html, body {
  height: 100%;
}

---

Do you want this type of design ? => Example Fiddle

链接地址: http://www.djcxy.com/p/41492.html

上一篇: 如何垂直居中div？

下一篇: 与div对齐高度100％