下面我將一一的介紹關於html元素水平居中的幾種方式
一：對於行內元素採用text-align:center;的方式
二：採用margin:0 auto;來實現水平居中顯示
三：用table實現
四；塊級的元素但是通過轉換成行內元素來實現塊級元素的水平居中顯示
五：父子元素都採用相對定位，父元素left:50%;子元素left:-50%;相對自己的長度減回50%，這樣實現向右偏移後拉回多的部分
六:採用css3的flexbox，display:flex;
七：用父元素的 display:relative;直接採用position:absolute;left:0;right:0;margin:auto來實現水平以居中
下面是講解的具體的**：
這是內容區一：實現對行內元素的水平居中顯示 採用text-align:center;的方式。
這是內容區二:紅色區域部分採用margin:0 auto;來實現水平居中顯示，當然要寫好元素的寬度。
這是內容區三：用table實現。
這是內容區五：父子元素都採用相對定位，父元素left:50%;子元素left:-50%;相對自己的長度減回50%，這樣實現向右偏移後拉回多的部分。
這是內容區六:採用css3的flexbox，display:flex;
這是內容區七:用父元素的 display:relative;直接採用position:absolute;left:0;right:0;margin:auto來實現水平以居中。
總結下：其實實現水平居中只有一下幾種思路：
1：對於最簡單的行內元素的居中採用text-align:center;設定即可。
2：對於最普通的水平居中採用絕對定位後設定left：50%;後再採用各種方式去實現自身水平差的補回。
3：對於普通的元素對齊還可以採用絕對定位後left:0;right:0;加上元素的寬度，在此基礎之上就可以採用margin:auto;實現水平對齊了。
4：用css3的flexbox屬性
5:在元素外巢狀table實現，但是這樣會有很多層巢狀
6：marin:0 auto;方便的實現已知寬度的水平居中
實現元素水平居中和垂直居中的幾種方法
單行文字的居中 水平居中 text align center 垂直居中 line height px px前的數字為元素坐在行的行高 多行文字的垂直居中 1 使用diaplsy table來實現 display table使塊狀元素成為乙個塊級 display table cell 子元素設定成 單...
CSS水平居中的幾種方法
如果被設定元素為文字 等行內元素時，水平居中可以通過父元素設定text align center來實現。html style text align center 我是文字，哈哈，我想要在父容器中水平居中顯示。div body 當被設定元素為塊狀元素時用 text align center 就不起作用...
垂直水平居中的幾種方法
father son 效果圖 當元素絕對定位時，它會根據離他最近的乙個非static定位的父元素進行定位，這裡應該根據父元素定位。father son 效果圖 首先用top 50 和left 50 讓子元素的座標原點 左上角 移動到父元素的中心，然後再利用負margin讓它往左偏移自身寬的一半，再往...