Align multiple divs in one line and center text veticaly and horizontally

问题

Note: This is a reference question. If you see one of the many questions fitting this pattern, please simply refer them as duplicate, referencing this question.

Many visitors ask question with context referring to, here is a solution for that :

I want to align n number of divs in one line and also place the content in them vertically and horizontally in center.

The text to align vertically can be a single line or a paragraph <p> too!!

回答1:

To show n-number of divs in one line, there are 3 approaches

• use display:table;
  This method is supported IE8 and above and comes in pretty handy if you have large amount of css and text and divs to align

• use float:left;
  All time favorite, the old school approach, this method is most recommended when old browser support has to be considered, requires clearing of the float at the end

• use display:inline-block;
  never used this method personally float method was considered instead of using this by me

Base CSS

/************Supported by IE8 and above *******************/
 div.table {
    width:100%;        /* important */
    display:table;
    text-align:center;
}
.table-cell {
    display:table-cell;
    vertical-align:middle;
}
/************ Method 2 *******************/
 div.inline {
    width:100%;
    display:inline-block;
    text-align:center;
}
div.inline-div {
    width:32%;
    display:inline-block;
}
/************ Method 3 *******************/
 .float-class {
    width:100%;
    text-align:center;
}
div.floatdiv {
    float:left;
    width:32%;
    border:1px solid black;
}

.clearfloat {
    clear:both;
}

fiddle showing all three methods in 1 place

To vertically center one line in a div

again 3 approaches :
keep in mind, solution has to be responive, so margin-top:25% or 50% is not gonna work!!!

• line-height
  this approach is usefull when the dimesnion of the parent div is known, then you can simply use the trick line-height:equal to height of parent div

• position
  idea is to make the parent positioned relative and the text span class an absolute, then center the absolute text using positioning like top/bottom

• display:table-cell
  highly recommended if IE7 and older support is not required, simply use vertical-align:middle;

Base css

div.fixed-div-height {

    height:200px;
    width:200px;
    text-align:center;
}
div.fixed-div-height span {
    line-height:200px; /* equal to height of the fixed div*/
}


div.unknown-div-height {
    height:100%;
    text-align:center;
    position: relative;
}
div.unknown-div-height > span.unknown-div-margin {
    display:inline-block;
    height:20px;
    position: absolute;
    top: 50%;
    left:0;
    right:0;
}


div.for-ie8-and-above{
    width:100%;
    display:table;
    height:400px;
    text-align:center;
}
div.for-ie8-and-above > div{
    height:400px;
    width:100%;
    display:table-cell;
    vertical-align:middle; /* key here */
}

fiddle showing all three methods

To center a paragraph vertically in center
this is the tricky part

Practically there is no possible way to center a parapgraph whose height and the containers height is unknown unless you gor for some hacks....one such hack has been quoted at the end of this answer from css tricks!!

Simplest, use :

div.table-cell {
    height:400px; /* can be anything, even in percentage*/
    width:100%;
    display:table-cell;
    vertical-align:middle;   /* key here */
}

fiddle showing remaining 2 possible cases

Another solution posted here : How do I vertically center text with CSS?

IE hack for display:tables : CSS Tricks

回答2:

I aligned multiple divs within a table cell (td) by creating a container DIV, as follows:

<td>
    <div class="containingDIV"> // container DIV with CSS as below
        <div></div>
        <div></div>
        <div></div>
    </div>
</td>

where css for containingDIV is:

.containingDIV {
    display: flex;
}

来源：https://stackoverflow.com/questions/21430203/align-multiple-divs-in-one-line-and-center-text-veticaly-and-horizontally