CSS居中总结-学习笔记

一、水平居中

(1) 行内元素

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

(2) 单个块状元素

[code].item{
margin:0 auto;
}

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

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

(3) 多个块状元素

1、使用inline-block

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

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

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

2、使用flexbox

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

(5) 使用float

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

[code]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、绝对定位实现水平居中

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

二、垂直居中

(1) 单行的行内元素

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

(2) 多行的行内元素

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

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

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

三、水平垂直居中

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

1、使用margin:auto

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

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

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

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

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

(3) 使用flex布局实现

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