CSS中無寬度水平居中的實現方法是在元素的父元素中使用text-align:center;屬性,這可以使元素在父元素中水平居中。
父元素{ text-align:center; }
這個屬性適用于元素的寬度是動態的或不確定的情況下,比如說圖片或文本,他們可能會在不同的瀏覽器中以不同的寬度顯示。 可以通過這種方式使元素始終保持水平居中,而無需在樣式表中硬編碼其寬度。
另外一個實現無寬度水平居中的方式是使用CSS Flexbox布局,這是CSS3新加入的功能。flexbox最顯著的特性是可以輕松實現水平和垂直居中,這是以前比較困難的任務。
父元素{ display:flex; justify-content:center; align-items:center; }
可以通過設置display:flex;來讓元素成為flexbox container。然后通過justify-content:center;和align-items:center;屬性使元素水平與垂直居中。
總之,在CSS中實現無寬度水平居中是一個比較簡單的任務,可以使用text-align:center;實現基本的水平居中,也可以使用CSS3 Flexbox布局實現更靈活的居中方式。
下一篇css無序列表折疊