实现水平居中的办法
原文
简书原文：https://www.jianshu.com/p/3c92fb92fa5d
大纲
1、margin和width实现水平居中
2、inline-block实现水平居中方法
3、浮动实现水平居中的方法
4、绝对定位实现水平居中
5、CSS3的flex实现水平居中方法
6、CSS3的fit-content实现水平居中方法
通过实例实现水平居中——以分页标签为实例
最初效果
<!DOCTYPE
html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>DIV+CSS布局教程</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
a{
text-decoration: none;
}
li{
list-style:none;
}
.pagination li {
line-height: 25px;
}
.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(top,#434345,#2f3032);
background:-webkit-gradient(linear,left top,left bottom,from(#434345),to(#2f3032));
}
.pagination a:hover {
box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
background: linear-gradient(top,#f48b03,#c87100);
background:-webkit-gradient(linear,left top,left bottom,from(#f48b03),to(#c87100));
}
</style>
</head>
<body>
<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>
</body>
</html>
1、margin和width实现水平居中
第一种方法是最古老的实现方案，也是大家最常见的方案，在分页容器上定义一个宽度，然后配合margin的左右值为“auto”实现效果。
优点：实现方法简单易懂，浏览器兼容性强；
缺点：扩展性差，无法自适应未知项情况。
<!DOCTYPE html>
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>DIV+CSS布局教程</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
a{
text-decoration: none;
}
li{
list-style:none;
}
.pagination {
width: 400px;
margin-left: auto;
margin-right: auto;
/*可以使用简写形式：margin:0 auto;*/
}
.pagination li {
line-height: 25px;
display: inline;
float: left;
margin: 0 5px;
}
.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(top,#434345,#2f3032);
background:-webkit-gradient(linear,left top,left bottom,from(#434345),to(#2f3032));
}
.pagination a:hover {
box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
background: linear-gradient(top,#f48b03,#c87100);
background:-webkit-gradient(linear,left top,left bottom,from(#f48b03),to(#c87100));
}
/*清除ul的浮动，形成一个BFC
.clearfix:after{
content: '';
height: 0;
line-height:0;
display: block;
visibility: hidden;
clear: both;
}
.clearfix{
zoom:1;
}
*/
</style>
</head>
<body style="background:gray;">
<div class="pagination">
<ul class="clearfix">
<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>
</body>
</html>
2、inline-block实现水平居中方法
这个方法相对来说也是简单易懂，但使用了inline-block解决了水平居中的问题，却又产生了一个新的问题，就是分页项与分页项由回车符带来的空白间距，那么不知情的同学就会不知道如何解决？（而且这个间距并不是所有浏览器都有），所以需要解决下inline-block带来的间距。
优点：
1. 高度可变
2. 内容溢出会将父元素撑开。
3. 支持跨浏览器，也适应于IE7。
4. 简单易懂，扩展性强；
缺点：
1. 需要一个容器
2. 水平居中依赖于margin-left: -0.25em;该尺寸对于不同的字体/字号需要调整。
3. 内容块宽度不能超过容器的100% - 0.25em。
4. 需要额外处理inline-block的浏览器兼容性。
<!DOCTYPE html>
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>DIV+CSS布局教程</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
a{
text-decoration: none;
}
li{
list-style:none;
}
.pagination {
text-align: center;
font-size: 0;
letter-spacing: -4px;
word-spacing: -4px;
}
.pagination ul{
display:inline-block;
}
.pagination li {
line-height: 25px;
display: inline;
float: left;
margin: 0 5px;
zoom:1;
letter-spacing:normal;
word-spacing:normal;
font-size:12px;
}
.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(top,#434345,#2f3032);
background:-webkit-gradient(linear,left top,left bottom,from(#434345),to(#2f3032));
}
.pagination a:hover {
box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
background: linear-gradient(top,#f48b03,#c87100);
background:-webkit-gradient(linear,left top,left bottom,from(#f48b03),to(#c87100));
}
.clearfix:after{
content: '';
height: 0;
line-height:0;
display: block;
visibility: hidden;
clear: both;
}
.clearfix{
zoom:1;
}
</style>
</head>
<body style="background:gray;">
<div class="pagination">
<ul class="clearfix">
<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>
</body>
</html>
3、浮动实现水平居中的方法
这种方法实现和前面的与众不同，使用了浮动配合position定位实现。
优点：兼容性强，扩展性强；
缺点：实现原理较复杂。
<!DOCTYPE html>
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>DIV+CSS布局教程</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
a{
text-decoration: none;
}
li{
list-style:none;
}
.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%*/
}
.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(top,#434345,#2f3032);
background:-webkit-gradient(linear,left top,left bottom,from(#434345),to(#2f3032));
}
.pagination a:hover {
box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
background: linear-gradient(top,#f48b03,#c87100);
background:-webkit-gradient(linear,left top,left bottom,from(#f48b03),to(#c87100));
}
.clearfix:after{
content: '';
height: 0;
line-height:0;
display: block;
visibility: hidden;
clear: both;
}
.clearfix{
zoom:1;
}
</style>
</head>
<body style="background:gray;">
<div class="pagination">
<ul class="clearfix">
<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>
</body>
</html>
4、绝对定位实现水平居中
这种实现我们有一个难题，我并不知道元素的宽度是多少，这样也就存在如方法一所说的难题，但我们可以借助方法三的原理，即相对定位来做一点变通。
优点：扩展性强，兼容性强;
缺点：理解性难。
<!DOCTYPE html>
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>DIV+CSS布局教程</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
a{
text-decoration: none;
}
li{
list-style:none;
}
.pagination {
position:relative;
}
.pagination ul{
position:absolute;
left:50%;
}
.pagination li {
line-height: 25px;
margin: 0 5px;
float: left;
position:relative;/*注意这里不能是absolute*/
right:50%;
}
.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(top,#434345,#2f3032);
background:-webkit-gradient(linear,left top,left bottom,from(#434345),to(#2f3032));
}
.pagination a:hover {
box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
background: linear-gradient(top,#f48b03,#c87100);
background:-webkit-gradient(linear,left top,left bottom,from(#f48b03),to(#c87100));
}
.clearfix:after{
content: '';
height: 0;
line-height:0;
display: block;
visibility: hidden;
clear: both;
}
.clearfix{
zoom:1;
}
</style>
</head>
<body style="background:gray;">
<div class="pagination">
<ul class="clearfix">
<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>
</body>
</html>
5、CSS3的flex实现水平居中方法
CSS3的flex是一个很强大的功能，她能让我们的布局变得更加灵活与方便，唯一的就是目前浏览器的兼容性较差。
display:box是2009年以前的关于flex的用法，是需要加上前缀的
display:flex是之后的用法，也是以后的标准用法
优点：实现便捷，扩展性强
缺点：兼容性差。
<!DOCTYPE html>
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>DIV+CSS布局教程</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
a{
text-decoration: none;
}
li{
list-style:none;
}
.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;
}
.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(top,#434345,#2f3032);
background:-webkit-gradient(linear,left top,left bottom,from(#434345),to(#2f3032));
}
.pagination a:hover {
box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
background: linear-gradient(top,#f48b03,#c87100);
background:-webkit-gradient(linear,left top,left bottom,from(#f48b03),to(#c87100));
}
.clearfix:after{
content: '';
height: 0;
line-height:0;
display: block;
visibility: hidden;
clear: both;
}
.clearfix{
zoom:1;
}
</style>
</head>
<body style="background:gray;">
<div class="pagination">
<ul class="clearfix">
<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>
</body>
</html>
6、CSS3的fit-content实现水平居中方法
“fit-content”是CSS中给“width”属性新加的一个属性值，他配合margin可以让我轻松的实现水平居中的效果：
优点：简单易懂，扩展性强;
缺点：浏览器兼容性差
<!DOCTYPE html>
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>DIV+CSS布局教程</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
a{
text-decoration: none;
}
li{
list-style:none;
}
.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;/*需要加上这个样式，不然同样达不到效果*/
}
.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(top,#434345,#2f3032);
background:-webkit-gradient(linear,left top,left bottom,from(#434345),to(#2f3032));
}
.pagination a:hover {
box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
background: linear-gradient(top,#f48b03,#c87100);
background:-webkit-gradient(linear,left top,left bottom,from(#f48b03),to(#c87100));
}
.clearfix:after{
content: '';
height: 0;
line-height:0;
display: block;
visibility: hidden;
clear: both;
}
.clearfix{
zoom:1;
}
</style>
</head>
<body style="background:gray;">
<div class="pagination">
<ul class="clearfix">
<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>
</body>
</html>
参考网址
https://www.w3cplus.com/css/elements-horizontally-center-with-css.html
http://blog.csdn.net/freshlover/article/details/11579669
