在網頁設計中,居中對齊是一種常見的布局方式,使得元素相對于視口水平和垂直方向都居中顯示。在CSS中,有多種方式可以實現標簽居中的效果。
/* 水平居中 */ text-align: center; /* 對于塊級元素 */ margin: 0 auto; /* 對于塊級元素,寬度必須指定 */ /* 垂直居中 */ display: flex; align-items: center; /* 對于容器 */ justify-content: center; /* 對于子元素 */
對于水平居中,可以通過text-align屬性讓塊級元素內部的文本居中顯示,也可以通過margin屬性讓塊級元素在容器內水平居中對齊。需要注意的是,這種方式對于寬度不固定的元素無法使用。
對于垂直居中,可以使用Flexbox布局。將容器的display屬性設置為flex,再通過align-items和justify-content屬性將子元素垂直和水平居中對齊。這種方式適用于寬高未知的元素,且IE10及以上都支持Flexbox布局。