text-align:center line-height = 容器高度
父元素
text-align: center;
line-height: 160px;
font-size: 0;
vertical-align: middle;
//與父元素對齊
baseline
預設。元素放置在父元素的基線上。
sub垂直對齊文字的下標。
super
垂直對齊文字的上標
top把元素的頂端與行中最高元素的頂端對齊
text-top
把元素的頂端與父元素字型的頂端對齊
middle
把此元素放置在父元素的中部。
bottom
把元素的頂端與行中最低的元素的頂端對齊。
text-bottom
把元素的底端與父元素字型的底端對齊。
length
%使用 "line-height" 屬性的百分比值來排列此元素。允許使用負值。
inherit
規定應該從父元素繼承 vertical-align 屬性的值。
父元素
.b可以設定父元素為relative,，fixed,absolute也可以
子元素
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
可以設定父元素為relative,fixed,absolute也可以
子元素
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
可以設定父元素為relative,fixed,absolute也可以
子元素
position: absolute;
left: 50%;
top: 50%;
margin-left:-自身寬度一半
margin-right:-自身高度一半
table + tabel cell + ele
table
會作為塊級**來顯示（類似 ）
table-row
瀏覽器會預設建立乙個**行（類似
table-cell
作為乙個**單元格顯示（類似 和 ）
）設定tabel-cell之後需要設定對齊方式 vertical-align
table 元素設定 text-align : center
line-height: 300px;
text-align: center;
子元素:
vertical-align: middle;
HTML CSS常見的幾種垂直居中方式
2019 11 02 20 18 35 一丶什麼是垂直居中 指當前標籤在父級容器中垂直方向是居中顯示的 實現垂直居中的幾種方式 1.table cell vertical align 屬性配合使用 2.absolute transform 屬性配合使用 3.display align items 屬...
css樣式盒子常見的幾種居中方式
假設乙個div裡面有乙個p元素。第一種居中方式 利用了偽元素讓子元素p在div盒子裡左右水平居中只需要在它的父元素div裡加text align center 垂直方向居中需要在父元素後面加了乙個偽元素，並使得樣式為inline block height 100 就是和父元素一樣高，vertical...
常見居中方式 （水平居中 垂直居中）
1.水平居中 1 子元素 margin 0 auto 2 使用絕對定位 父元素 position relative 子元素 position absolute left 50 transform translatex 50 3 父元素 text align center 子元素 display in...