CSS3提供了許多方式來實現(xiàn)文本垂直居中對齊,比如使用display: table-cell、line-height、flex等。以下是幾種常用的方法:
/* display: table-cell */ .container { display: table; height: 200px; } .center { display: table-cell; vertical-align: middle; } /* line-height */ .container{ height: 200px; line-height: 200px; } .center { display: inline-block; vertical-align: middle; } /* flex */ .container{ display: flex; align-items: center; justify-content: center; height: 200px; } .center { width: 100%; }
以上方法都可以實現(xiàn)文本的垂直居中對齊。需要注意的是,在使用display: table-cell時,父元素需要設置為display: table,且height屬性必須設置;使用line-height時,必須使垂直居中的元素為inline-block或inline元素,并設置vertical-align屬性;使用flex時,需要將父元素設置為display: flex,并配合align-items和justify-content屬性。
上一篇css 雙飛翼
下一篇css3文字邊框動畫效果