html td 水平居中,html元素水平居中的几种方法

下面我将一一的介绍关于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;方便的实现已知宽度的水平居中