实现水平居中的办法

原文

  简书原文: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  前端路上的小兵  阅读(512)  评论(0编辑  收藏