下面我將一一的介紹關于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來實現水平以居中

下面是講解的具體的代碼：

css的水平居中

#page{

width: 100%;

color: white;

}

.he{

width: 100%;

height: 100px;

background: #625050;

text-align: center;

line-height: 100px;

}

.bo{

width: 100%;

background: #6aa087;

}

.fo{

height: 100px;

background: #2f5d34;

}

.content{

height: 100px;

border: 2px solid #fff;

}

.content1{

background: #66a05c;

text-align: center;

}

.content2{

background: #8a5841;

text-align: center;

}

.content2Bo{

height:50px;

width: 60%;

border: 2px solid red;

line-height: 50px;

margin: 0 auto;

}

.content3{

background: #2f5d34;

}

table{

margin: 0 auto;

}

.content4{

background: #8a5841;

text-align: center;

}

.contentBo4{

display: inline;

}

ul li{

list-style-type: none;

}

.content5{

float: left;

position: relative;

left: 50%;

}

.contentBo5{

position: relative;

left: -50%;

background: #231b40;

}

.content6{

width: 100%;

text-align: center;

background: #9ca05c;

display: flex;

align-items: center;

justify-content: center;

}

.content7{

position: relative;

}

.contentBo7{

position: absolute;

left: 0;

right: 0;

width: 80%;

border: 2px solid red;

margin: 0 auto;

text-align: center;

}

下面是對元素水平居中對齊的幾個例子以及說明

這是內容區一：實現對行內元素的水平居中顯示 采用text-align:center;的方式。

這是內容區二:紅色區域部分采用margin:0 auto;來實現水平居中顯示，當然要寫好元素的寬度。

這是內容區三：用table實現。

• 這是第一行
• 這是第二行
• 這是內容區四：本來是contentBo4的塊級的元素但是通過轉換成行內元素來實現塊級元素的水平居中顯示。

這是內容區五：父子元素都采用相對定位，父元素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;方便的實現已知寬度的水平居中

總結

以上是生活随笔為你收集整理的html td 水平居中,html元素水平居中的几种方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。