Css -- 垂直与水平居中

本文轉載自：大漠博客

水平方向(未知寬度)

由分页组件为例

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>
</di>

css

ul{
    padding: 0;
}
.pagination li {
    line-height: 25px;
    list-style: 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(#434345, #2f3032);
}

.pagination a:hover {
    text-decoration: none;
    box-shadow: 0 1px 0 #f9bd71 inset, 0 1px 0 #0a0a0a;
    background: linear-gradient(#f48b03, #c87100);
}

1. 给定宽度，利用 margin: auto

2. 利用 display: inline-block;

.pagination{
    text-align: center; 
font-size: 0;   //解决子元素为inline-block时两边多余的空白
}
ul{
    padding: 0;
}
.pagination li {
    display: inline-block;
    line-height: 25px;
    list-style: none;
    zoom: 1;
    margin: 0 5px;
}

.pagination a {
    text-decoration: none;
    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(#434345, #2f3032);
}

.pagination a:hover {
    box-shadow: 0 1px 0 #f9bd71 inset, 0 1px 0 #0a0a0a;
    background: linear-gradient(#f48b03, #c87100);
}

优点：扩展性强。

缺点：会造成元素之间多余的空白部分。解决方法:给父元素设置 fong-size: 0,子元素重新设置大小

3. 浮动实现水平居中的方法

1. 首先：整个容器左浮动

.pagination{
    float: left;
    width: 100%;
    overflow: hidden;
    position: relative;     //让子元素以他为移动
}

1. 然后：在列表项ul上向右移动50%（left:50%;）

.pagination ul{
    padding: 0;
    clear: left;
    float: left;        // 让内容由内部元素大小撑起来
    position: relative;
    left: 50%;          
}

1. 最后：我们在li上也定义position:relative属性，但其移动的方向和列表ul动的方向刚好是反方向，而其移动的值保持一致

缺点：实现原理较复杂。

4. 绝对定位实现水平居中

1. 常见知道宽度情况下：

   .ele {
   position: absolute;
   width: 宽度值;
   left: 50%;
   margin-left: -(宽度值/2);
   }

2. 不知道宽度

.pagination {
  position: relative;
  height: 40px;   /*最好设置高度，不然是沒有高度*/
}
.pagination ul {
    padding: 0;
    margin: 0;
    position: absolute;
    left: 50%;
}
.pagination li {
  line-height: 25px;
  margin: 0 5px;
  float: left;
  position: relative;/*注意，这里不能是absolute，大家懂的*/
  right: 50%;
}

5. flex实现水平居中方法

.pagination{
    display: flex;
    justify-content: center;
}

6. CSS3的fit-content实现水平居中方法

.pagination ul{
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    margin: auto;   
}

缺點： 兼容性还差点

垂直方向

综合