假設乙個div裡面有乙個p元素。
利用了偽元素讓子元素p在div盒子裡左右水平居中只需要在它的父元素div裡加text-align:center;垂直方向居中需要在父元素後面加了乙個偽元素，並使得樣式為inline-block;height:100%;就是和父元素一樣高，vertical-align:middle;垂直居中，也就是p元素相對與偽元素居中，由於偽元素和div一樣高，所以相當於p元素在div裡垂直居中。
css樣式如下：
div
div p
div:after
這裡利用了定位居中
子元素p設定position：absolute脫離文件流,預設以html作為父元素，所以我們給父元素div設定position:relative;使得p以div為父元素做位置的變動，left:0;tight:0;top:0;bottom:0;（只有設定了定位的元素才可以使用這種方式來移動），最後margin:auto;就會水平和垂直都居中。
第三種居中方式：
這裡利用了彈性盒居中
父元素div設定成彈性盒樣式，justify-content:center;主軸居中
align-items:center;垂直居中（而且這兩個只能設定在父元素上，彈性盒知識）
css樣式：
div
p
利用定位線左上角居中，然後左移子元素寬度的一半，再上移子元素高度的一半。
div
p
利用定位+動畫移動屬性transform
transform:translate(-50%,-50%);
常見的幾種居中方式
text align center line height 容器高度 父元素text align center line height 160px font size 0 子元素 vertical align middle 與父元素對齊 vertical align回顧middle是對齊父元素的 m...
css常用的幾種居中方式
css常用的幾種居中方式,可以直接拿來用 1,position absolute定位 box 複製 2,position fixed box 複製 3,position fixed,margin auto box 複製 4,position absolute,margin auto box 複製 5...
HTML CSS常見的幾種垂直居中方式
2019 11 02 20 18 35 一丶什麼是垂直居中 指當前標籤在父級容器中垂直方向是居中顯示的 實現垂直居中的幾種方式 1.table cell vertical align 屬性配合使用 2.absolute transform 屬性配合使用 3.display align items 屬...