版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
1、CSS 居中方法集锦记录收集纯CSS层面实现的水平、垂直居中方法可用于块级、行内快、内联元素以及文字图片等。水平或垂直居中 1.1 text-align1.2 margin1.3 line-height1.4 padding水平与垂直同时居中2.1 挡板方式实现的水平垂直居中2.2 vertical-align2.3 模拟单元格特性2.4 position + margin:负值2.5 position + margin:auto2.6 position + translate2.7 position + calc2.8 相对于viewport进行水平垂直居中2.9 css3 - flex图片
2、相关的水平垂直居中3.1 背景图方式3.2 CSS 表达式3.3 button 方式3.4 网易NEC - 适合图片的方式1. 水平或垂直居中1.1 text-align对于要求不高，并且内容是文本元素或是行内块元素(inline-block)，可以很容易的通过text-align:center进行水平居中。示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> div background:#eee; te
3、xt-align: center; span display:inline-block; background:#aaa; width: 200px; </style></head><body> <div> 使用text-align:center进行水平居中<br/> <span>inline-block</span> </div></body></html>1.2 margin对于内容是块级元素,通过 margin:0px auto 可以很容易的进行水平居中。示例：<
4、!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> div background:#eee; text-align: center; p background:#aaa; width:500px; line-height:100px; margin:0px auto; </style></head><body> <div> <p>MARGIN:0PX AUTO
5、</p> </div></body></html>优点缺点简单直观被水平居中的元素必须要有固定的宽度1.3 line-height对于内容是纯文本或者是行内快元素时，最简单的就是通过设置 line-height 实现垂直居中，不过这种方式有很大的不足之处，一是行高的值必须为当前父元素的高度，二是，只能一行，不能有多行。优点缺点简单直观只能作用于内联元素或行内块、只能一行不能多行、行高的值必须为父元素的高度1.4 padding如果父元素对于高度没有什么要求，可以通过设置 padding-top 与 padding-bottom 为相同值，来实现伪
6、的垂直居中效果。示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> div padding:200px 0; background:#eee; text-align: center; p background:#aaa; </style></head><body> <div> <p>PADDING</p> </div>&l
7、t;/body></html>优点缺点非常简单进行伪垂直居中的元素不能有高度2. 水平与垂直同时居中2.1 挡板方式实现的水平垂直居中我称这种方式为挡板方式，是因为它在实现方式上很类似。示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box width:600px; height:600px; backgrou
8、nd:#eee; .top height:50%; .box1 width:200px; height:200px; background:#aaa; margin:0px auto; margin-top:-100px; </style></head><body> <div class="box"> <div class="top"></div> <div class="box1"></div> </div></body
9、></html>优点缺点不需要定位依然需要计算与设置负边距值要引入一个废标签Note： 但在实际的使用上如果不考虑IE7-，那个无用的元素可以使用伪类替代。2.2 vertical-alignvertial-align 是CSS的一个属性，该属性只对行内元素或行内快元素产生作用，主要用于设置当前元素与同级相邻元素的垂直对齐方式(基于基线)。常用于图片与文字的对齐。这里则是利用 vertical-align 这种对齐 的特性来在父元素中插入一个高度与其相同的子元素，最后再为该子元素设置 vertical-align 属性来对齐我们真正的内容。这种方式还是蛮巧妙的，但是我认为其局
10、限性在于只能作用于行内或行内快，另外要插入一个无关的废标签，不过该标签可以通过伪类进行代替。最将 text-align:center 与 vertical-align:middle，结合使用，我们便可以将行内快元素水平垂直居中示例：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> div width:300px; height:200px; text-align:center; background:#e
11、ee; text-align:center; div:after content:'' display:inline-block; width: 1px; height:100%; vertical-align:middle; </style> </head> <body> <div> <button>button1</button> <button>button2</button> </div> </body> </html>2.3 模拟单元格特
12、性我们知道表格有很多特性，比如宽度的关联伸缩，再比如我们现在需要用到的垂直居中，而正好的是CSS也可以通过display属性为HTML元素赋予表格元素的特性。常见的有：display:table 声明一个表格display:table-row 声明一个行display:table-cell 声明一个单元格。简单的使用示例（快速入门）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .table dis
13、play:table; border:1px solid #ccc; .row display:table-row; .cell display:table-cell; border:1px solid #ccc; </style> </head> <body> <div class="table"> <div class="row"> <div class="cell">ROW1-CELL1</div> <div class="cel
14、l">ROW1-CELL2</div> </div> <div class="row"> <div class="cell">ROW2-CELL1</div> <div class="cell">ROW2-CELL2</div> </div> </div> </body> </html>因此利用这种手段，我们也可以实现需要的水平垂直居中效果。<!DOCTYPE html><
15、;html lang="en"><head> <meta charset="UTF-8"> <style> .box display:table-cell; width:500px; height:500px; background:#eee; vertical-align:middle; text-align: center; p display:inline-block; background:#aaa; </style></head><body> <div clas
16、s="box"> <p> TABLE-CELL-TEST<br/> TABLE-CELL-TEST<br/> TABLE-CELL-TEST<br/> </p> </div></body></html>优点缺点垂直居中多行内容特别是文字内容只有IE8+ 才支持只能垂直居中内联元素、行内块通过模拟表格的方其优点在于可以垂直居中多行内容，但是缺点就是目前只有IE8+的版本才被支持。2.4 position + margin:负值通过定位可以实现水平垂直居中，不过对使用的条件要求
17、较高，首先内容要进行绝对定位(absolute)，父元素要进行相对定位(relative)，其次内容要有固定的尺寸，最后调整margin负值与偏移属性的值。示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> div position:relative; height:600px; width:600px; background:#eee; p position:absolute; width:200px;
18、 height:200px; top:50%; left:50%; margin-left:-100px; margin-top:-100px; background:#aaa; </style></head><body> <div> <p>MARGIN:0PX AUTO</p> </div></body></html>优点缺点应用范围光兼容性好进行居中的元素要有固定的尺寸要计算margin负边距值2.5 position + margin:auto对于绝对定位的元素来说,其默认效果是：
19、尺寸会自动收缩适应内容。位置默认的是auto，边距则默认值为0。此时如果在默认尺寸的情况下，我们将其四个方向的偏移值都设置为0的话，元素会自动向四个方向拉伸100%贴合其参照元素。如果再设置固定宽度，并设置 margin:auto,那么便可以惊奇的发现，绝对定位的元素会水平垂直居中在父元素（参照元素）中。关于 margin:auto为什么能水平居中块级而不能垂直居中的问题auto是自动分配的意思，margin:auto,便是自动分配边距的意思。但是根据CSS2.1的规范，块级元素的宽度是参照其父元素的宽度（也就是为什么块级元素独占一行的原因），只有宽度是100%，auto才能够进行分配，然后让
20、元素水平居中，但是问题来了，CSS规范同时也定义了块级元素的高度是根据内容适应，也就是说块级元素的高度是不可知的，所以为上下边距设置auto当然不能进行垂直居中。然而当我们给一个元素进行定位，使其成为块级元素并脱离文档流时，又同时为其设置top:0;right:0;bottom:0;left:0，便会将该元素的尺寸完全贴合其父元素或参照元素，即width:100%,height:100%,那么此时再设置margin:auto,便可以进行水平/垂直居中。示例：<!DOCTYPE html><html lang="en"><head> <
21、;meta charset="UTF-8"> <style> .box position:relative; width:600px; height:600px; background:#aaa; p position:absolute; width:200px; height:200px; left:0; right:0; bottom:0; top:0; margin:auto; background:#eee; </style></head><body> <div class="box"&
22、gt; <p>This is Position Advace</p> </div></body></html>优点缺点使用条件简单无需计算负边距值进行居中的元素要有固定的尺寸只有IE8+支持2.6 position + translate通过CSS3的 translate 实现的水平垂直居中，其原理与position+margin负值的方式很类似。但是相比于margin负值方式，其优点体现于：不需要为内容设置固定的宽度。不需要手动计算负边距值。transform:translate(-50%,-50%) 可以自动向左与向上移动当前元素
23、宽度的50%。示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> div position:relative; height:600px; width:600px; background:#eee; p position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); ound:#aaa; </style></he
24、ad><body> <div> <p>transForm</p> </div></body></html>优点缺点可以不需要为居中的盒子设置固定的尺寸手机端只有IE9+支持2.7 position + calccalc() 是CSS3的函数属性，其功能是进行四则运算，参与运算的值可以是相对单位，也可以是绝对单位。利用calc进行居中的原理其实就是通过为left:50%,top:50%,然后让50%再减去当前元素宽度或者高度的一半，其机制仍然属于负边距方式，但相比于position的负边距以及于transl
25、ate等方式，它主要减少了样式的声明数量。示例： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> .box position:relative; width:600px; height:600px; background:#aaa; p position:absolute; width:200px; height:200px; left:calc(50% - 100px); top:calc(50% - 1
26、00px); background:#eee; </style></head><body> <div class="box"> <p>CSS3 - CALC</p> </div></body></html>优点缺点减少样式声明手机端需要为居中的元素设置固定尺寸只有IE9+、Chrome19+2.8 相对于viewport进行水平垂直居中CSS3中引入了新的度量单位，vh 与 vw，它们都是基于viewport的相对单位，即viewport的宽度与高度分别被分为100等
27、份的vh 与 vw。也就是说：1vh = 1%(viewport的高度)1vw = 1%(viewport的宽度)那么为当前元素的尺寸设置为 50vh与50vw 即当前窗口的高度与宽度的一半，再结合 translate(50%,50%) 便可以将当前元素水平垂直居中在当前窗口中。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> p position:absolute; width:50vw; height:5
28、0vh; transform:translate(50%,50%); background:#eee; </style></head><body> <div class="box"> <p>CSS3 - CALC</p> </div></body></html>优点缺点在基于窗口的环境下使用只有IE9+ 、Chrome26+、Firefox19+、safair6.0+ 支持固定尺寸2.9 css3 - flexflex可谓是CSS3加入的强大布局特性，利用flex我们
29、可以实现灵活方便且可塑的布局方案。利用flex布局只需要简单的设置两行样式声明即可实现元素的水平与垂直居中。justify-content:center 水平居中排列align-items:center 垂直居中排列示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> div display:flex; justify-content:center; align-items:center; text-ali
30、gn: center; background:#eee; p background:#aaa; </style></head><body> <div> <p>FLEX</p> </div></body></html>优点缺点移动端 无需设置固定尺寸兼容性低版本IE不支持3 图片相关的水平垂直居中专门用于图片水平垂直居中的CSS方法，并且以下方法都可以在所有浏览器中得到兼容。3.1 背景图方式这种方式最简单，就是将图片作为背景图，然后设置 background-position:cente
31、r center 让其水平垂直居中在元素中。3.2 CSS 表达式这种方式要借助IE的私有扩展，并且这种方式的好处是可以兼容到IE5。缺点也很明显，就是只能用于图片，因为这涉及到CSS表达式中的 this.height。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> .box display:table-cell; /* 在高版本浏览器中通过表格特性进行垂直居中图片 */ width:500px; heig
32、ht:500px; vertical-align: middle; background:#eee; .box img display: block; margin:0px auto; margin-top:expression(500 - this.height)/2); /* IE 浏览器的专有CSS 表达式属性 */ </style></head><body> <div class="box"> <img src=" alt="" /> </div></body></html>3.3 button 方式这种方式有些过滤奇技淫巧，但是好处就是可以兼容所有浏览器，但是在IE浏览器中会有稍微的瑕疵，也就是当单击的时候，图片会有轻微的晃动。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <sty
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
评论
0/150
提交评论