©2020-2024 ioDraw All rights reserved
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
.parent{position:relative;}
.child{position:absolute; left:50%; transform:translate(-50%);}
use flex layout
/* First method */
.parent{display:flex; justify-content:center;}
/* Second method */
.parent{display:flex;}
.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.
/*1*/
.parent{display:table-cell;vertical-align:middle;height:20px;}
/*2*/
.parent{display:inline-block;vertical-align:middle;line-height:20px;}
Absolute positioning
.parent{position:relative;}
.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;}
.child{display:inline-block;}
Absolute positioning
.parent{position:relative;}
.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
flex realization
.parent{display:flex;justify-content:center;align-items:center;}
The above is only a single column layout .
Technology