实现水平居中的办法

原文

　　简书原文：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

posted @ 2018-07-19 00:37 前端路上的小兵阅读(1013) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

前端路上的小兵

自律给我自由