六種實現元素水平居中

1、margin和width實現水平居中

.center {
width: 960px;
margin-left: auto;
margin-right: auto;
}

2、inline-block實現水平居中方法

.pagination {
　　 text-align: center;
　　 font-size: 0;
　　 letter-spacing: -4px;
　　 word-spacing: -4px;
　　}
.pagination li {
　　 line-height: 25px;
　　 margin: 0 5px;
　 display: inline-block;
　　 *display: inline;
　　 zoom:1;
　　 letter-spacing: normal;
　　 word-spacing: normal;
　　 font-size: 12px;
}
3、浮動實現水平居中的方法

.pagination {
　　float: left;
　　width: 100%;
　　overflow: hidden;
　　position: relative;
　　}
.pagination ul {
　　clear: left;
　　float: left;
　　position: relative;
　　left: 50%;/*整個分頁向右邊移動寬度的50%*/
　　 text-align: center;
　　}
.pagination li {
　　 line-height: 25px;
　　margin: 0 5px;
　　display: block;
　　 float: left;
　　 position: relative;
　　 right: 50%;/*將每個分頁項向左邊移動寬度的50%*/
　　}

4、絕對定位實現水平居中

　　a>已知寬

　　.ele {
　　position: absolute;
　　 width: 寬度值;
　　 left: 50%;
　　 margin-left: -(寬度值/2);
　　}

　　b>未知寬

　　.pagination {
　　　　position: relative;
　　　　}
　　.pagination ul {
　　　　 position: absolute;
　　　　 left: 50%;
　　}
　　.pagination li {
　　　　 line-height: 25px;
　　　　 margin: 0 5px;
　　　　float: left;
　　　　 position: relative;/*註意，這裏不能是absolute，大家懂的*/
　　　　 right: 50%;
　　}

5、CSS3的flex實現水平居中方法

.pagination {
　　 display: -webkit-box;
　　-webkit-box-orient: horizontal;
　　-webkit-box-pack: center;
　　display: -moz-box;
　　-moz-box-orient: horizontal;
　　-moz-box-pack: center;
　　 display: -o-box;
　　-o-box-orient: horizontal;
　　 -o-box-pack: center;
　　 display: -ms-box;
　　 -ms-box-orient: horizontal;
　　 -ms-box-pack: center;
　　 display: box;
　　 box-orient: horizontal;
　　 box-pack: center;
}
.pagination li {
　　 line-height: 25px;
　　 margin: 0 5px;
　　 float: left;
}

6、CSS3的fit-content實現水平居中方法

　　：fit-content”是CSS中給“width”屬性新加的一個屬性值，他配合margin可以讓我輕松的實現水平居中的效果：著作權歸作者所有。

.pagination ul {
　　 width: -moz-fit-content;
　　 width:-webkit-fit-content;
　　 width: fit-content;
　　 margin-left: auto;
　　 margin-right: auto;
}
.pagination li {
　　 line-height: 25px;
　　 margin: 0 5px;
　　 float: left;
}

.center {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
}	

六種實現元素水平居中