六种实现元素水平居中

Posted 2020-12-03 clj2017

六种实现元素水平居中

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;
}	

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