0.display: flex;

父級? ? ? ? ? ? ??display: flex;text-align: center;

子標(biāo)簽? ? ? ??margin: auto;

1. display:?flex;

? ? justify-content:?center;

? ? align-items:?center;

2：display: -webkit-box;? ? ? ?（父級標(biāo)簽里添加）

? ? -webkit-box-pack:center;

? ? -webkit-box-align:center;

? ? -webkit-box-orient: vertical;

? ? text-align: center

3.display:?table-cell;? ? vertical-align:middle;?

此元素會(huì)作為一個(gè)表格單元格顯示 ,,,,,,把此元素放置在父元素的中部(還有 vertical-align:sub; 垂直對齊文本的下標(biāo)。)

1.個(gè)塊級標(biāo)簽包行內(nèi)標(biāo)簽

父級標(biāo)簽樣式? ,淡然還是要設(shè)置寬高的，不然怎么體現(xiàn)出來?垂直居中

????display: table-cell;

????vertical-align: middle;

????text-align: center;?

2.個(gè)塊級標(biāo)簽包行塊級元素（塊級元素設(shè)置了寬高）

上面的代碼就不夠了， 里面的塊級元素 要加上 margin: 0 auto;? ? 看圖大家應(yīng)該都明白了

4.絕對定位和負(fù)邊距

父標(biāo)簽加上? ? ? position:relative;

子標(biāo)簽? ? ? ? ? ??

? ??????????position: absolute;

? ? ? ? ? ? width:100px;

? ? ? ? ? ? height: 50px;

? ? ? ? ? ? top:50%;

? ? ? ? ? ? left:50%;

? ? ? ? ? ? margin-left:-50px;

? ? ? ? ? ? margin-top:-25px;

? ? ? ? ? ? text-align: center;

其實(shí)就是先用margin移出（父級）身長，高的一半，在用定位

5.絕對定位和0

父標(biāo)簽加上? ? ? position:relative;

子標(biāo)簽? ? ? ?

? ??width:?139px;

? ? height:?139px;

? ? overflow:?auto;

? ? margin:?auto;

? ? position:?absolute;

? ? top:?0;

? ? left:?0;

? ? bottom:?0;

? ? right:?0;

? ??通過margin:auto? ? ?和? ? top,left,right,bottom都設(shè)置為0實(shí)現(xiàn)居中

6.translate? ? (不常用)

父標(biāo)簽加上? ? ? position:relative;

子標(biāo)簽? ?

position: absolute;

????????????top:50%;

????????????left:50%;

????????????width:100%;

????????????transform:translate(-50%,-50%);

????????????text-align: center;

寫代碼當(dāng)然是越簡單越少，所以上面由簡單到復(fù)雜 往下寫的