First, divide the page into large structural areas , Such as containers , header , Content area and footer ;

Then the content area and the city , Establish grid structure , Analyze page structure

Finally, design the structure in each content area , Determine page layout .

1. horizontally

use display:inline and text-align

/*.parent {

text-align: center;


.child {

display: inline-block;


use margin:0 auto set up

.child {

width: 300px;

margin: 0 auto;


use table realization

.child{display: table; margin: 0 auto;}

Use absolute positioning


.child{position:absolute; left:50%; transform:translate(-50%);}

use flex layout

/* First method */

.parent{display:flex; justify-content:center;}

/* Second method */


.child{margin:0 auto;}

html code :

test .. test ..111

2. Vertical center

vertical -align

Only one element belongs to inline or inline-block(table-cell It can also be understood as inline-block level ) level , On his body vertical-align Properties will work .

use vertical-align When , As the aligned baseline is marked by the baseline of row height, it needs to be set line-height Or set display:table-cell.





Absolute positioning


.child{positon:absolute; top:50%; transform:translate(0,-50%);}

flex realization

.parent{display:flex; align-items:center;}

3. Horizontal vertical center

vertical-align text-aling inline-block

.parent{display:table-cell; vertical-align:middle; text-align:center;}


Absolute positioning



flex realization


The above is only a single column layout .