收藏

下载资源 加入VIP,免费下载

第1页 / 共24页

第2页 / 共24页

第3页 / 共24页

第4页 / 共24页

第5页 / 共24页

优点缺点

不需要定位依然需要计算与设置负边距值

要引入一个废标签

Note：

但在实际的使用上如果不考虑IE7-，那个无用的元素可以使用伪类替代。

2.2vertical-align

vertial-align是CSS的一个属性，该属性只对行内元素或行内快元素产生作用，主要用于设置当前元素与同级相邻元素的垂直对齐方式（基于基线）。

常用于图片与文字的对齐。

这里则是利用vertical-align这种对齐的特性来在父元素中插入一个高度与其相同的子元素，最后再为该子元素设置vertical-align属性来对齐我们真正的内容。

这种方式还是蛮巧妙的，但是我认为其局限性在于只能作用于行内或行内快，另外要插入一个无关的废标签，不过该标签可以通过伪类进行代替。

最将text-align:

center与vertical-align:

middle，结合使用，我们便可以将行内快元素水平垂直居中

示例：

DOCTYPEhtml>

2.3模拟单元格特性

我们知道表格有很多特性，比如宽度的关联伸缩，再比如我们现在需要用到的垂直居中，而正好的是CSS也可以通过display属性为HTML元素赋予表格元素的特性。

常见的有：

display:

table声明一个表格

display:

table-row声明一个行

display:

table-cell声明一个单元格。

简单的使用示例（快速入门）：

DOCTYPEhtml>

ROW1-CELL1

ROW1-CELL2

ROW2-CELL1

ROW2-CELL2

因此利用这种手段，我们也可以实现需要的水平垂直居中效果。

DOCTYPEhtml>

TABLE-CELL-TEST

TABLE-CELL-TEST

TABLE-CELL-TEST

优点缺点

垂直居中多行内容特别是文字内容只有IE8+才支持

只能垂直居中内联元素、行内块　

通过模拟表格的方其优点在于可以垂直居中多行内容，但是缺点就是目前只有IE8+的版本才被支持。

2.4position+margin:

负值

通过定位可以实现水平垂直居中，不过对使用的条件要求较高，首先内容要进行绝对定位（absolute），父元素要进行相对定位（relative），其次内容要有固定的尺寸，最后调整margin负值与偏移属性的值。

示例：

DOCTYPEhtml>

优点缺点

应用范围光

兼容性好进行居中的元素要有固定的尺寸

要计算margin负边距值

2.5position+margin:

auto

对于绝对定位的元素来说,其默认效果是：

尺寸会自动收缩适应内容。

位置默认的是auto，

边距则默认值为0。

此时如果在默认尺寸的情况下，我们将其四个方向的偏移值都设置为0的话，元素会自动向四个方向拉伸100%贴合其参照元素。

如果再设置固定宽度，并设置margin:

auto,那么便可以惊奇的发现，绝对定位的元素会水平垂直居中在父元素（参照元素）中。

关于margin:

auto为什么能水平居中块级而不能垂直居中的问题

auto是自动分配的意思，margin:

auto,便是自动分配边距的意思。

但是根据CSS2.1的规范，块级元素的宽度是参照其父元素的宽度（也就是为什么块级元素独占一行的原因），只有宽度是100%，auto才能够进行分配，然后让元素水平居中，但是问题来了，CSS规范同时也定义了块级元素的高度是根据内容适应，也就是说块级元素的高度是不可知的，所以为上下边距设置auto当然不能进行垂直居中。

然而当我们给一个元素进行定位，使其成为块级元素并脱离文档流时，又同时为其设置top:

0;right:

0;bottom:

0;left:

0，便会将该元素的尺寸完全贴合其父元素或参照元素，即width:

100%,height:

100%,那么此时再设置margin:

auto,便可以进行水平/垂直居中。

示例：

DOCTYPEhtml>

ThisisPositionAdvace

优点缺点

使用条件简单

无需计算负边距值进行居中的元素要有固定的尺寸

只有IE8+支持

2.6position+translate

通过CSS3的translate实现的水平垂直居中，其原理与position+margin负值的方式很类似。

但是相比于margin负值方式，其优点体现于：

不需要为内容设置固定的宽度。

不需要手动计算负边距值。

transform:

translate（-50%,-50%）可以自动向左与向上移动当前元素宽度的50%。

示例：

DOCTYPEhtml>

优点缺点

可以不需要为居中的盒子设置固定的尺寸

手机端只有IE9+支持

2.7position+calc

calc（）是CSS3的函数属性，其功能是进行四则运算，参与运算的值可以是相对单位，也可以是绝对单位。

利用calc进行居中的原理其实就是通过为left:

50%,top:

50%,然后让50%再减去当前元素宽度或者高度的一半，其机制仍然属于负边距方式，但相比于position的负边距以及于translate等方式，它主要减少了样式的声明数量。

示例：

DOCTYPEhtml>

CSS3-CALC

优点缺点

减少样式声明

手机端需要为居中的元素设置固定尺寸

只有IE9+、Chrome19+

2.8相对于viewport进行水平垂直居中

CSS3中引入了新的度量单位，vh与vw，它们都是基于viewport的相对单位，即viewport的宽度与高度分别被分为100等份的vh与vw。

也就是说：

1vh=1%（viewport的高度）

1vw=1%（viewport的宽度）

那么为当前元素的尺寸设置为50vh与50vw即当前窗口的高度与宽度的一半，再结合translate（50%,50%）便可以将当前元素水平垂直居中在当前窗口中。

DOCTYPEhtml>

CSS3-CALC

优点缺点

在基于窗口的环境下使用只有IE9+、Chrome26+、Firefox19+、safair6.0+支持

固定尺寸

2.9css3-flex

flex可谓是CSS3加入的强大布局特性，利用flex我们可以实现灵活方便且可塑的布局方案。

利用flex布局只需要简单的设置两行样式声明即可实现元素的水平与垂直居中。

justify-content:

center水平居中排列

align-items:

center垂直居中排列

示例：

DOCTYPEhtml>

优点缺点

移动端

无需设置固定尺寸兼容性低版本IE不支持

3图片相关的水平垂直居中

专门用于图片水平垂直居中的CSS方法，并且以下方法都可以在所有浏览器中得到兼容。

3.1背景图方式

这种方式最简单，就是将图片作为背景图，然后设置background-position:

centercenter让其水平垂直居中在元素中。

3.2CSS表达式

这种方式要借助IE的私有扩展，并且这种方式的好处是可以兼容到IE5。

缺点也很明显，就是只能用于图片，因为这涉及到CSS表达式中的this.height。

DOCTYPEhtml>

3.3button方式

这种方式有些过滤奇技淫巧，但是好处就是可以兼容所有浏览器，但是在IE浏览器中会有稍微的瑕疵，也就是当单击的时候，图片会有轻微的晃动。

DOCTYPEhtml>

3.4网易NEC-很适合图片的方法

这种网易NEC发明的方式，其优点在于只要图片的尺寸不超过父元素，图片都会在父元素中居中。

原理：

首先为外层盒子进行相对定位，然后为内部盒子进行绝对定位，并且尺寸是由其内容（图片）撑开，再为内部盒子设置偏移值left:

50%;top:

50%;最后再将其内部放入两个img标签，但引用的都是一张图片，其中一张图片进行占位隐藏用于让内部盒子识别尺寸，另一张图片则是用来显示，并且这张图片再进行绝对定位，然后left:

-50%;top:

-50%，这样便可以将图片水平、垂直居中在父元素中。

示例：

doctypehtml>

.box{

position:

relative;

width:

600px;

height:

600px;

background:

#eee;

}

.inner{

position:

absolute;

left:

50%;

top:

50%;

}

.inner.img1{

visibility:

hidden;

}

.inner.img2