文字居中，文字垂直居中水平居中，居中，水平居中垂直居中，塊元素垂直居中?當我們在做前端開發是時候關於css居中的問題是很常見的。情況有很多種，不同的情況又有不同的解決方式。水平居中的方式解決的時候相對來說通過css比較容易設定，垂直居中相對比較棘手。
先來說一下水平居中的不同情況與不同解決方法吧。
1文字，等行內元素的水平居中方法呢比較簡單。直接給父元素設定乙個text-align:centent屬性就可以實現元素的水平居中了。
2確定寬度的塊級元素水平居中怎麼設定呢?設定方法也不難，可以通過設定外邊距，margin：0auto;這句來實現確定寬度的塊級元素水平居中。
3不確定寬度的塊級元素設定水平居中的方法有多種，這裡介紹三種方法給大家。
第一種方法呢，是使用table作為容器的方法來實現。當然不大推薦使用這種方法，因為新增了無意義的標籤。這裡就稍微介紹一下吧。table標籤本身並不是塊級元素，當我們不設定table的寬度的話，他裡面的寬度是由他內部元素的寬度撐起來的。但即使我們沒有設定table的寬度，直接設定table的外邊距margin：0auto;就可以實現水平居中了!這樣我們就可以通過設定table水平居中，間接使裡面的內容居中。
第二種方法，相對於用table的方法的好處是不用增加無語義標籤，簡化標籤巢狀深度。這個思路是這樣的，通過改變塊級元素的display屬性值為inline型別，然後設定text-align:center來實現居中。這種方法也有一定不妥之處就是把塊級元素改為行內元素後，行內元素比塊元素少了一些功能。比如說設定長寬值等，在專案運用中可能會有一些限制，大家可以自行選擇。
下面是第三種方法。通過給父元素設定浮動float，再設定父元素的position屬性為relative和left：50%;子元素設定position：relative和left：-50%來實現水平居中。這個好處是可以保留塊級元素仍然是以display：block的形式顯示，不會新增無意義的標籤，不新增巢狀深度。確點是設定了position：relative;帶來了一些***。下面是第三種方法的例項**，放到body標籤裡
web入門基礎學習教程web開發所需的構...lamp平台介紹及...
面就可以了。
三種方法使用都比較廣泛，都有缺點和優點。具體選擇哪種方法可視情況而定。
css水平居中的方法
方法1 通過margin 0 auto text align center 實現css水平居中 方法2 通過display flex 彈性布局 實現css水平居中 父元素 display flex flex direction column 從上到下垂直排列 而子元素 align self cent...
css實現水平居中的方法
一直想寫一篇關於水平居中的文章，因為水平居中是平時寫介面最常用到的。那麼如何實現呢，我根據自己的經驗以及網上的經驗，做了乙個小小的總結。最簡單的margin方法 center 優點 實現方法簡單易懂，瀏覽器相容性強 缺點 擴充套件性差 僅inline block屬性是無法讓元素水平居中，他的關鍵之處...
CSS垂直居中水平居中方法
center 剛在別人的部落格裡看到這種方法時真的覺得很奇葩，以下是大神的解釋 解釋 1 在普通內容流中，margin auto的效果等同於margin top 0 margin bottom 0。2 position absolute使絕對定位塊跳出了內容流，內容流中的其餘部分渲染時絕對定位部分不...