這裏總結了CSS水平居中和垂直居中的各種方式。應該說是很全了。
概述:
用法:將text-align:center添加到父元素的樣式中。
渲染:
用法:將margin:0 auto添加到元素樣式，使其左邊距和右邊距平均共享塊級元素行的剩余寬度。
渲染:
當然，如果妳的塊級元素沒有設置寬度，那麽div會填充壹行，所以沒有水平居中。
如果有多個塊級元素，可以使用inline-block with text-align:center在需要居中的元素樣式上寫入inline-block，在父元素上寫入text-align:center。
渲染:
Flex還可以輕松地將多個塊級元素水平居中。
用法:向父元素樣式添加display:flex justify-content:center。
效果圖和第三張壹樣。
當然，可以用於多個塊級元素的居中方法也可以用於單個塊級元素。
使用display:table with margin:0 auto可以實現寬度不定的塊級元素居中的效果。
渲染:
使用絕對定位給元素壹個左:50%，然後添加壹個margin-lelt:-(寬度的壹半)。
渲染:
然而，明顯的缺點是，妳知道元素的寬度，而且它必須是固定的，所以這是壹種愚蠢的編寫方法。
渲染:
渲染:
這個方法和橫心第六法壹樣，就不多說了。
渲染:
這個和橫置中心第七法壹樣，就不多說了。
渲染:
渲染:
渲染:
缺點也很明顯，需要計算。
渲染:
渲染:
渲染:
妳需要html添加
如果妳覺得我的文章有用，請喜歡並關註，也歡迎來我的個人博客/BokFang。