CSS居中总结-学习笔记

一、水平居中

(1) 行内元素

.parent{
   display:block;
   text-align:center;
}

(2) 单个块状元素

.item{
   margin:0 auto;
}

优点：实现方法简单易懂，浏览器兼容性强

缺点：扩展性差，无法自适应未知项情况

(3) 多个块状元素

1、使用inline-block

.parent{
   display:inline-block;
   text-align:center;
}

优点：简单易懂，扩展性强

缺点：需要额外处理inline-block的浏览器兼容性（inline-block元素间由回车符带来的空白间距）

2、使用flexbox

.parent{
   display:flex;
   justify-content:center;
    /*space-around：项目位于各行之前、之间、之后都留有空白的容器内；
    space-between:项目位于各行之间留有空白的容器内*/
}

(5) 使用float

例如一个div里有ul>li实现的分页功能。

div{
   float:left;
   position:relative;
   width:100%;
   overflow:hidden;
}
.div ul{
   clear:left;
   float:left;
   position:relative;
   left:50%;/*整个分页向右边移动宽度的50%*/
   text-align:center;
}
div li{
   float:left;
   position:relative;
   right:50%;/*将每个分页项向左边移动宽度的50%*/
   line-height:25px;
   margin:0 5px;
   display:block;
}

首先让导航浮动到左边，而且每个分页项也进行浮动，如下图：

接下来就是让分页导航居中的效果，在这里通过"position:relative"属性实现，首先在列表项"ul"上向右移动50%(left:50%),如下图：

 

如上图所示，整个分页向右移动了50%的距离，紧接着我们在"li"上也定义"position:relative"属性，但其移动的方向和列表"ul"移动的方向刚好是反方向，而其移动的值保持一致：

优点：兼容性强，扩展性强

缺点：实现原理较复杂

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

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

二、垂直居中

(1) 单行的行内元素

.parent{
   height:200px;
}
/*以下代码中，将a元素的height和line-height设置为和父元素一样的高度即可实现垂直居中*/
.parent a{
   height:200px;
   line-height:200px;
}

(2) 多行的行内元素

.parent{
   display:table-cell;
   vertical-align:middle;
}

(3) 已知高度的块状元素

.item{
   top:50%;
   margin-top:-50px;/*margin-top值为自身高度的一半*/
   position:absolute;
   padding:0;
}

三、水平垂直居中

(1) 已知高度和宽度的元素

1、使用margin:auto

.item{
   position:absolute;
   top:0;
   right:0;
   bottom:0;
   left:0;
   margin:auto;
}

2、设置margin-left / margin-top 为自身高度的一半

.item{
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-50px;
   margin-left:-50px;
}

(2) 未知宽度和高度的元素

.item{
   position:absolute;
   top:50%;
   left:50%;
   transform:translate(-50%,-50%);/*使用CSS3的transform*/
}

(3) 使用flex布局实现

.item{
   display:flex;
   justify-content:center;
   align-items:center;
   /*可以设置高度查看居中情况*/
   height:200px;
}