CSS 居中方法集锦.docx

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

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

CSS 居中方法集锦 居中 方法 集锦

  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。