六种实现元素水平居中

1、margin和width实现水平居中

.center {
      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;
　　 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;
  　　宽度值;
   　　 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 {
　　 -moz-fit-content;
　　 -webkit-fit-content;
　　 fit-content;
　　 margin-left: auto;
　　 margin-right: auto;
}
.pagination li {
　　 line-height: 25px;
　　 margin: 0 5px;
　　 float: left;
}

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

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/css/elements-horizontally-center-with-css.html © w3cplus.com