make thw two consecutive in the center of the container

问题

I have

<div id="container">
     <div id="div2">Title</div>                
     <div id="div3">text text</div>
</div>

where

#container {
    height:500px;
    width:100%;
    text-align: center;
}

#div2, #div3 {
   width: 50%;
}

is there anyway to make the both #div2 and div3 together at the center of the #container (horizontally and vertically) with their height being variable?

回答1:

This is a hard question to answer because in all reality we have no idea what your width is going to even come close to looking like once you place everything you need inside of the two inner divs. However, I do have a few solutions for you that you can definitely benefit from.

NOTE: All of the following JsFiddle examples have been altered to include color, that way you can fully understand the positioning effects.

First Option: The Floater

Basically, this option is pretty straight forward, we keep everything the same except we add in three elements display, vertical-align, and float. This causes the following CSS:

#container {
    height:500px;
    width:100%;
    text-align: center;
    background-color:blue;
    display: table-cell;
    vertical-align:middle;
}

#div2, #div3 {
    float:left;
    text-align:center;
    width: 50%;
    background-color:orange;

}

I will go into further detail about why we used the three methods in a few moments.

Second Option: Boxception

I believe this is probably the one you want, and all I have added is margin, display, and vertical-align which produces the following CSS code:

#container {
    height:500px;
    width:100%;
    text-align: center;
    background-color:blue;
    display: table-cell;
    vertical-align:middle;
}

#div2, #div3 {
    margin: 0 auto;
    text-align:center;
    width: 50%;
    background-color:orange;

}

So why do we use the funky, table-cell display? It's a simple trick when combined with vertical-align to position anything on the inside of the outer div to correctly position the items in the center of it.

The difference between the first example and the second example is that the float will keep the content always wanting to stay on the left side of the div (in all essence, not really centering it vertically) but some people like this aspect.

The margin is an easy trick to make sure you can center something horizontally. I do want to point out that this div will only expand as the content in the div expands (that is the meaning of 100% width). So if you have no content whatsoever, then the outer most div actually doesn't exist until content is placed within the inner div. So, don't be discouraged if your div looks like a width-wise small line and long height; to better express this, here is an example.

回答2:

use float: left; and height: 100%;

JSFIDDLE

回答3:

This can be done with your current markup with flexbox.

FIDDLE (Added vendor prefixes for older browsers in fiddle)

CSS

#container {
    height:500px;
    text-align: center;
    background: pink;
    display: flex;
    align-items: center; /* horizontal center */
    flex-direction: column;
    justify-content: center; /*vertical center */
}

#div2, #div3 {
   width: 50%;
    background: orange;
}

That being said, it would make it a lot easier if you would wrap the div2 and div3 elements in a div, and then try to align that wrapper div.

来源：https://stackoverflow.com/questions/20926514/make-thw-two-consecutive-div-in-the-center-of-the-container

标签

css