CSS 可以很方便地幫助我們實現文字在元素中央的居中對齊,有以下幾種方式:
/* 水平居中 */ text-align: center;
使用 text-align 屬性,可以使文本居中對齊,但僅適用于塊級元素,行內元素需要將其包裹在塊級元素中。
/* 垂直居中 */ line-height: height;
將行高設置為元素高度即可實現垂直居中,但前提是元素必須擁有確定的高度。
/* 水平、垂直居中 */ display: flex; justify-content: center; align-items: center;
通過將元素的 display 設置為 flex,然后使用 justify-content 和 align-items 屬性實現水平和垂直居中。
/* 水平、垂直居中 */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
借助 position 和 transform 屬性,可以實現子元素在其父元素中居中。
上一篇css居中定位的方法
下一篇css居左對齊