CSS 字垂直居中對齊是讓文字在其所在容器中垂直居中的一種常見布局需求。下面將介紹幾種實現方法。
.container { display: flex; align-items: center; justify-content: center; } .text { margin: auto; }
一種簡單的實現方法是使用flex布局。容器設置為display: flex,然后使用align-items和justify-content來控制垂直和水平位置。文本元素設置一個margin:auto,即可水平和垂直居中。
.container { position: relative; } .text { position: absolute; top: 50%; transform: translateY(-50%); }
第二種實現方法是使用絕對位置和transform屬性。對容器設置position:relative,文本元素設置position:absolute,然后使用top:50%將其向上移動一半的距離,再使用transform:translateY(-50%)向上移動元素自身高度的一半,即可垂直居中。
.text { display: table-cell; vertical-align: middle; }
第三種實現方法是使用表格布局。將文本元素的display屬性設置為table-cell,再使用vertical-align:middle來實現垂直居中。
以上三種方法均為常用的CSS字垂直居中對齊方法,可以根據不同情況選擇不同的實現方法。
下一篇css 字左居中顯示