CSS塊級元素指的是有自己的獨立行的元素,例如div、p等標簽。塊級元素在默認情況下會占據整個父元素的寬度。
在布局設計中,我們經常需要將塊級元素居中,這時就需要用到CSS的水平居中方法。
/* 方法一:使用margin */ .center { margin: 0 auto; /* 0為上下邊距,auto為左右邊距 */ } /* 方法二:使用display和text-align */ .container { display: flex; justify-content: center; } .center { text-align: center; }
其中方法一是比較常用和簡單的方法,直接將左右邊距設置為auto即可。
方法二則需要將父元素設置為Flex布局,然后通過justify-content屬性將塊級元素居中;同時,也需要將塊級元素的文本水平居中,這里使用text-align:center實現。
無論是哪種方法,這些CSS技巧都是開發者在實現自適應頁面布局時所必須掌握的基礎知識。