css点滴2—六种⽅式实现元素⽔平居中
本⽂参考⽂章
元素⽔平居中的⽅法，最常见的莫过于给元素⼀个显式的宽度，然后加上margin的左右值为auto。这种⽅式给固定宽度的元素设置居中是最⽅便不过的。但是很多情况下，⽆法确定容器宽度，这⾥我们讨论⼀下这些问题。
为了更好说明问题，我们看⼀个制作分页效果的代码：
html代码：
<div class="pagination">
<ul>
<li>
<a href="#">Prev</a></li>
<li>
<a href="#">1</a></li>
<li>
<a href="#">2</a></li>
<li>
<a href="#">3</a></li>
<li>
<a href="#">4</a></li>
<li>
<a href="#">5</a></li>
<li>
<a href="#">Next</a></li>
</ul>
</div>
css代码：
.pagination a {
display: block;
color: #f2f2f2;
text-shadow: 1px 0 0 #101011;
padding: 0 10px;
border-radius: 2px;
box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
background: linear-gradient(to top,#434345,#2f3032);
text-decoration: none;
}
.pagination a:hover {
text-decoration: none;
box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
background: linear-gradient(to top,#f48b03,#c87100);
}
li {
list-style: none;
}
效果：
这显然不是我们想要的效果，接下来我们分⼏种⽅案来实现⽔平居中。下⾯css代码我们只贴出关键代码。
1.margin和width实现⽔平居中
第⼀种⽅式是最古⽼的实现⽅案，也是最常见的，在分页容器上定义⼀个宽度，然后配合margin的左右值为“auto”实现效果。
css代码：
.pagination li {
line-height: 25px;
list-style: none;
display: inline;
float: left;
margin: 0 5px;
}css固定定位
/*!*给容器⼀个宽度*!*/
.pagination {
width: 500px;
margin-left: auto; /**/
margin-right: auto;
}
效果：
效果是实现了，但是扩展性不⼀定强。这种⽅式显⽰了5个分页和⾸页，末页共7个显⽰项，往往我们⽆法知道到底要显⽰多少个分页项，⽆法确定每个分页项的宽度是多少，也就⽆法确定容器的宽度。
缺点：这种⽅法简单易懂，浏览器兼容性强，但是扩展性差，需要确定容器宽度，⽆法⾃适应未知情况。
2.inline-block实现⽔平居中
这种⽅式使⽤inline-block和text-align:center结合起来实现⽔平居中。⽗标签设置text-align:center，⽂本居中，⼦组件设置display:inline-block，⾏内元素。
css代码：
.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;
}
效果：
这种⽅法相对来说简单，但是使⽤inline-block实现了⽔平居中的问题，却⼜产⽣了⼀个新的问题，就是分页项之间的回车符带来的空⽩间距，这个间距也不是所有浏览器都会有，所以要解决下inline-block带来的间距，详细解决⽅法参考
缺点：这种⽅法简单易懂，扩展性强，但是需要额外处理⾃组建中inline-block的空⽩间距。
3.浮动实现⽔平居中
float浮动要么考左，要么靠右，没有居中选项，其实只要略加处理就可以了。总体来说就是容器宽度100%，向右浮动50%，⼦元素向左浮动50%，并且都相对定位。
css代码：
.pagination {
float: left; /*分页容器浮动到左边*/
width: 100%; /*分页容器宽度为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% */
}
效果：
这种⽅法和前⾯的都不同，使⽤浮动float配合position:relative相对⾃⾝定位来实现，下⾯的⽂章介绍了这种⽅法的实现原理
div是⼀个块元素，其默认宽度是100%，如图所⽰：
如果给div设置了浮动之后，他的内容有多宽就会撑开多⼤的容器（除显式设置元素宽度值之外），这也是让分页导航居中的关键：
接下来使⽤传统的制作⽅法，让导航浮动到左边，⽽且每个分页也进⾏浮动
现在要想的办法是让分页导航居中的效果，这⾥是通过“position:relative”属性实现，⾸先在列表项ul上向右移动50%（left:50%），如下图：
如上图⼀样整个分页容器向右移动了50%的距离，接着我们在“li”上也定义“position:relative”属性，但其移动⽅向和列表“ul”移动⽅向刚好相反，⽽且移动值保持⼀致，也是50%：
这样就实现了float浮动居中的效果。
缺点：这种⽅式实现的兼容性强，扩展性强，但是实现原理⽐较复杂。
4.绝对定位实现⽔平居中
绝对定位实现⽔平居中，元素绝对定位：“position:absolute;”，向右移动50%：“left:50%;” ，设置固定宽度：“width：宽度值;”，设置左外边距为宽度值的⼀半：“margin-left:-(宽度值/2);”，代码如下：
.ele {
position: absolute;
width：宽度值;
left: 50%;
margin-left: -(宽度值/2);
}
但是这种做法有⼀个缺点，⼤多数情况下我们不知道元素的宽度，或者元素宽度是不固定的，但是我们可以在第三种⽅法的基础上做⼀点变通：容器绝对定位，左偏移50%，⼦元素相对定位，右浮动，右偏移50%
css代码：
.pagination {
position: relative; /*div相对定位*/
}
.pagination ul {
position: absolute; /*分页容器绝对定位*/
left: 50%; /*分页容器向右移动50%*/
}
.pagination li {
line-height: 25px;
margin: 0 5px;
position: relative; /*分页元素相对定位，注意这⾥不是absolute*/
float: left; /*分页元素浮动在右边*/
right: 50%; /*分页元素向左移动50%*/
}
效果：
缺点：这种⽅式扩展性强，兼容性强，但是理解起来⽐较难。
5.css3的flex实现⽔平居中
css3的flex是⼀个很强⼤的功能，能让布局变得灵活⽅便，唯⼀的缺点就是⽬前兼容性差。⽗元素flux布局，box-pack：center，box-origt:center，横向排列。
css代码：
.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”属性增加⼀个with:fit-content，表⽰缩⼩到内容宽度，再配合margin:auto可以轻松的实现⽔平居中的效果。
.pagination ul {
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content; /*给with属性值设置为fit-content*/
margin: 0 auto;
}
.pagination li {
line-height: 25px;
margin: 0 5px;
float: left;
}
效果：
缺点：这种⽅式简单易懂，扩展性强，缺点是兼容性差。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。