css实现水平居中

标签: css  水平居中

一、水平居中

1、nargin和width实现

margin:0 auto;

width:350px;

假设有如下分页,设置水平居中 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>水平垂直居中</title>
  </head>
  <style media="screen">
  .background {
    background-color: rgb(64, 64, 64);
    width: 500px;
    height: 600px;
  
  }
  
  .pagination li {
    line-height: 25px;
    list-style-type:none;
   
  }
.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);
  }
.pagination a:hover {
  text-decoration: none;
  box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
  background: linear-gradient(top,#f48b03,#c87100);
  }

  </style>
  <body>
    <div class="background">
      <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>

    </div>

  </body>
</html>

效果:

更改css:

.background {
    background-color: rgb(64, 64, 64);
    width: 500px;
    height: 600px;
    margin: 0 auto;
  }
  .pagination {
    width: 350px;
    margin-left: auto;
    margin-right: auto;
  }
  .pagination li {
    line-height: 25px;
    list-style-type:none;
    display: inline;
    float: left;
    margin: 0 2px;
  }

效果:

优点:实现方法简单易懂,浏览器兼容性强;

缺点:扩展性差,无法自适应未知项情况。

2、inline-block实现

     仅inline-block属性是无法让元素水平居中,他的关键之处要在元素的父容器中设置text-align的属性为“center”,这样才能达到效果。
 

  .background {
    background-color: rgb(64, 64, 64);
    width: 500px;
    overflow: auto;
    margin: 0 auto;
  }
  .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、浮动实现水平居中的方法

body {
    background-color: rgb(64, 64, 64);
  }

.pagination {
  float: left;
  width: 100%;
  overflow: auto;
  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%*/
}

这种方法实现和前面的与众不同,使用了浮动配合position定位实现。

 

  .test1{
  float: left;
  border: 2px solid yellow;
  position: relative;
  left:50%;

 }
 p{
   float: right;
   border:2px solid red;
   position: relative;
   right:50%;
 }

<div class="test">
        <div class="test1">
          <p>你好</p>
          <p>这是一些文本。</p>
          <p>这是另外一些文本。</p>
        </div>

优点:兼容性强,扩展性强;

缺点:实现原理较复杂。

四、绝对定位实现水平居中

 

  .test{
    border: 2px solid white;
    position: relative;

  }
  .test1{

  border: 2px solid yellow;
  position: absolute;
  left: 50%;

 }
 p{

   border:2px solid red;
   position: relative;
   float: left;
   right: 50%;
 }
  </style>
  <body>

      <div class="test">
        <div class="test1">
          <p>你好</p>
          <p>这是一些文本。</p>
          <p>这是另外一些文本。</p>
        </div>
      </div>

  </body>
</html>

 

原文链接:加载失败,请重新获取