1、margin和width實現水平居中
2、inline-block實現水平居中方法
3、浮動實現水平居中的方法
4、絕對定位實現水平居中
5、css3的flex實現水平居中方法
6、css3的fit-content實現水平居中方法
第一種方法是最古老的實現方案，也是大家最常見的方案，在分頁容器上定義乙個寬度，然後配合margin的左右值為「auto」實現效果。
優點：實現方法簡單易懂，瀏覽器相容性強；
缺點：擴充套件性差，無法自適應未知項情況。
這個方法相對來說也是簡單易懂，但使用了inline-block解決了水平居中的問題，卻又產生了乙個新的問題，就是分頁項與分頁項由回車符帶來的空白間距，那麼不知情的同學就會不知道如何解決？（而且這個間距並不是所有瀏覽器都有），所以需要解決下inline-block帶來的間距。
優點：1. 高度可變
2. 內容溢位會將父元素撐開。
3. 支援跨瀏覽器，也適應於ie7。
4. 簡單易懂，擴充套件性強；
缺點：1. 需要乙個容器
2. 水平居中依賴於margin-left: -0.25em;該尺寸對於不同的字型/字型大小需要調整。
3. 內容塊寬度不能超過容器的100% - 0.25em。
4. 需要額外處理inline-block的瀏覽器相容性。
這種方法實現和前面的與眾不同，使用了浮動配合position定位實現。
優點：相容性強，擴充套件性強；
缺點：實現原理較複雜。
這種實現我們有乙個難題，我並不知道元素的寬度是多少，這樣也就存在如方法一所說的難題，但我們可以借助方法三的原理，即相對定位來做一點變通。
優點：擴充套件性強，相容性強;
缺點：理解性難。
css3的flex是乙個很強大的功能，她能讓我們的布局變得更加靈活與方便，唯一的就是目前瀏覽器的相容性較差。
display:box是2023年以前的關於flex的用法，是需要加上字首的
display:flex是之後的用法，也是以後的標準用法
優點：實現便捷，擴充套件性強
缺點：相容性差。
「fit-content」是css中給「width」屬性新加的乙個屬性值，他配合margin可以讓我輕鬆的實現水平居中的效果：
優點：簡單易懂，擴充套件性強;
缺點：瀏覽器相容性差
實現水平居中垂直居中
熟悉水平居中和垂直居中的方法,不為別的,就為用的時候能夠信手拈來.下面直接步入正題.原文 16種方法實現水平居中垂直居中 1 若是行內元素,給其父元素設定 text align center,即可實現行內元素水平居中.2 若是塊級元素,該元素設定 margin 0 auto即可.3 若子元素包含 f...
css實現水平居中 垂直居中 垂直水平居中布局
1.只需要把行內元素包裹在乙個屬性display為block的父層元素中，並為父層元素新增如下屬性即可 parent2.塊狀元素解決方案 item3.多個塊狀元素解決方案將元素的display屬性設定為inline block，並且把父元素的text align屬性設定為center即可 paren...
css實現水平居中
一 對於行內元素 text align center 二 對於確定寬度的塊級元素 1 margin和width實現水平居中 常用 前提 已設定width值 margin left auto margin right auto 2 絕對定位和margin left 寬度值 2 實現水平居中 固定寬度塊...