浅谈CSS中的居中

 

css居中在咱们日常的页面布局中应用的十分频繁，掌握css各类居中方式也是颇有必要的，因此对各类居中方式进行一个小小的总结。

居中主要分为垂直居中和水平居中，而不一样元素之间的居中也有所区别，块级元素的居中，内联元素的居中。下面咱们对这些居中进行一个小小的总结：

一.水平居中

1.对于块级元素自身居中首选margin

注意：块级元素必须设置了宽度，文档最顶端必须声明DOCTYPE

通常状况下，能够以下设置，这会使这个块级元素在它的父级元素中居中。

#container{
  margin:0 auto;
}

若是只要水平居中的话，就设置margin-left:auto;margin-right:auto; 

#container{
    margin-left:auto;
    margin-right:auto;
}

2.对于块级元素自身居中（不肯定宽度的块）

如果此时对块中的内容进行居中的话：

若是块元素的子元素也是块元素，

1. 使用margin auto的方式。
2. 子元素使用display :inline;text-align:center;

若是块元素的子元素为行内元素，

1. 使用text-align:center;

3.块中文字水平居中

text-align 用于块级元素，做用在使用它的块元素中的文字或者图片上。使得它们在水平方向上居中。 

<p style="text-align:center"> 
   我是正常p,我设置了居中
</p> 
<span style="display:block; text-align:center">
   我实际上是一个行内元素span哦，我设置了居中，能够居中而且独占一行
</span> 
<p style="display:inline; text-align:center"> 
   能不能再同一行,我是被inline了的p，我设置了居中但是不能居中！
</p>

4.内联元素自身水平居中

将自身变成块级元素display:block;再进行水平居中。或者若是其父元素是块级元素，其父元素使用text-align:center;

注意：此时若是使用margin：auto;会出现错误，由于宽度的问题。

二.垂直居中

一、单行内容的居中

只考虑单行是最简单的，不管是否给容器固定高度，只要给容器设置 line-height 和 height，并使两值相等，再加上 over-flow: hidden 就能够了

.middle-demo-1{
height: 4em;
line-height: 4em;
overflow: hidden;
}

优势：
1. 同时支持块级和内联极元素
2. 支持全部浏览器
缺点：
1. 只能显示一行
2. IE中不支持<img>等的居中
要注意的是：
1. 使用相对高度定义你的 height 和 line-height
2. 不想毁了你的布局的话，overflow: hidden 必定要

二、多行内容居中，且容器高度可变

也很简单，给出一致的 padding-bottom 和 padding-top 就行

.middle-demo-2{
padding-top: 24px;
padding-bottom: 24px;
}

优势：
1. 同时支持块级和内联极元素
2. 支持非文本内容
3. 支持全部浏览器
缺点：容器不能固定高度

三、把容器看成表格单元

CSS 提供一系列diplay属性值，包括 display: table, display: table-row, display: table-cell 等，能把元素看成表格单元来显示。这是再加上 vertical-align: middle, 就和表格中的 valign="center" 同样了。

.middle-demo-3{
   display: table-cell;
   height: 300px;
   vertical-align: middle;
}

惋惜IE不支持这些属性，不过在其余浏览器上显示效果很是完美。
要注意的是：和一个合法的<td>元素必须在<table>里同样，display: table-cell 元素必须做为 display: table 的元素的子孙出现。

优势：不用说了吧，就是表格，效果和表格如出一辙
缺点：IE下无效

4.使用绝对定位

原理：元素在过分受限状况下，将margin设置为auto，浏览器会重算margin的值，过分受限指的是同时设置top/bottom与height或者left/right与width。

.middle-demo-4{
    position:absolute;
    width:50px;
    height:50px;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    resize:both;/*用于设置了全部除overflow为visible的元素*/
    overflow:auto;
}

使用绝对定位要求元素必须设置明确高度。内容超过元素高度时须要设置overflow决定滚动条的出现

优势：支持响应式，只有这种方法在resize以后仍然垂直居中

缺点：没有显式设置overflow时，内容超过元素高度时会溢出，没有滚动条

5.负margin-top方式

已知元素高度后，使用绝对定位将top设置为50%，mergin-top设置为内容高度的一半(height + padding) / 2；内容超过元素高度时须要设置overflow决定滚动条的出现。

.middle-demo-5{
    position:absolute;
    top:50%;
    left:0;
    right:0;
    margin:auto;
    margin-top:-100px; /*-(height+padding)/2*/
    width:200px;
    height:200px;
}

优势：代码量少、浏览器兼容性高支持ie6 ie7

缺点：不支持响应式(不能使用百分比、min/max-width)