1.Grid

先在父元素上設(shè)置grid布局 

display: grid;

grid: var(--居中);

指定子元素在中心位置 

grid-area: 中;
給子元素設(shè)置寬高，
width: 150px;

height: 150px;

2.絕對定位實(shí)現(xiàn)

先在父元素上設(shè)置相對定位 
position: relative 

給子元素 絕對定位 
position: absolute; 
上下左右全部為0 
top: 0; right: 0; bottom: 0; left: 0; 
給定寬高  
width: 70%; height: 25%; 
令外邊距自動(dòng)填充
margin: auto;

3.絕對定位 + 負(fù)邊距

先在父元素上設(shè)置相對定位 
position: relative 
給子元素絕對定位 
position: absolute;
 上方和左方為50% 
top: 50%; left: 50%;
 給定寬高 
 width: 300px; height: 200px; 
上外邊距為負(fù)的給定高度的一半 
 margin-top: -100px; 
左外邊距為負(fù)的給定寬度的一半 

 margin-left: -150px;

4.絕對定位 + 平移

先在父元素上設(shè)置相對定位  

position: relative 

 給子元素絕對定位 

position: absolute;

上方和左方為50% 
top: 50%; left: 50%;
不用給寬高，但是可以給個(gè)內(nèi)邊距防止內(nèi)容與盒子過于貼合 
padding: 10px;
這個(gè)50%是相對于自身寬高而言的 
transform: translate(-50%, -50%);

5.網(wǎng)格 Grid 實(shí)現(xiàn)

令其父元素變成網(wǎng)格布局 
display: grid;

令其子元素居中 

place-items: center;

6.Flex 彈性盒子

父元素 令其變成彈性布局 
display: flex;
令其子元素自動(dòng)外邊距 

 margin: auto;

7.表格布局

父元素上
display: table-cell;
text-align: center;
vertical-align: center;
子元素上設(shè)置
display: inline-block;