运行效果 http://jsbin.com/pogora/4/
<!doctype html> <html lang="en"> <head> <meta name="description" content="center!!"> <meta charset="UTF-8"> <title>Document</title> <style> .wrapper { width: 350px; height: 200px; background-color: #ddd; position: relative; /*为了计算待居中元素距离父元素的距离方便 offsetTop是距离最近relative元素的top值*/ } i { width: 50px; background-color: pink; } /*首先看看font-size不为0 发生的情况*/ .wrapper.font-size1 { line-height: 200px; } .wrapper.font-size0{ font-size: 0; line-height: 200px; } /*方案1 inline & inline block================================*/ .wrapper.inline { line-height: 200px; /*20px;*/ /*方案1只能控制一行文字居中*/ } .wrapper.inline span { word-break: break-all; } /*方案1 行高自适应版 这同时也是终极方案的原理 */ .wrapper.inline1:after { content: ''; height: 100%; /* inlineblock是为了高度 */ display: inline-block; vertical-align: middle; } .wrapper.inline1 span{ /* 待居中元素可以是inline 也可以是inlineblock */ /* display: inline-block; */
vertical-align:middle;
} /*方案1 改进(最常用且好记)=================================*/ .wrapper.InlineBlock { width: 350px; font-size: 0;/*为了去掉inline inline-block img元素之间的间距 但是显示不了文字 因此子元素要再次设置*/ line-height: 200px;/*line-height 和 height 同高*/ /*其实和第一种同理 */ } .wrapper.InlineBlock i, .wrapper.InlineBlock span, .wrapper.InlineBlock a, .wrapper.InlineBlock img { display: inline-block; width: 50px; background-color: pink; vertical-align: middle; /*line-height是撑起来了 但是默认垂直摆放方式是baseline 所以需要重新设置vertical-align方式*/ word-break: break-all; /*强制单词换行*/ font-size: 16px; line-height: normal; /*因为Line-height是继承的 所以要重写 使得待居中元素的内容行高变为默认高度*/ } .wrapper.InlineBlock i:nth-child(1) { background-color: green; } /*inline-block 终极版================================*/ .wrapper.Final { width: 100%; text-align: center; font-size: 0; /* 消除inline-block ... 之间的间距*/ } .wrapper.Final:after { display: inline-block; /*主要是为了设置高度*/ height: 100%; content: ''; vertical-align: middle; *display: inline; *zoom: 1; } .wrapper.Final i,.wrapper.Final span, .wrapper.Final img, .wrapper.Final a { display: inline-block; width: 50px; background-color: pink; vertical-align: middle; font-size: 12px; *display: inline; *zoom: 1; } /*关于 font */ .wrapper.font1, .wrapper.font0{ height: 100px; } .wrapper.font1:after, .wrapper.font0:after{ display: inline-block; content: ''; height: 100%; vertical-align: middle; } .wrapper.font0{ font-size: 0; } .wrapper.font0 i, .wrapper.font1 i{ display: inline-block; height: 50px; vertical-align: middle; } /*方案3 table-cell*/ .wrapper.TableCell { display: table-cell; background-color: #ccc; vertical-align: middle; /*vertical-align应该和table-cell元素在一起*/ } .wrapper.TableCell .sub { width: 30px; background-color: pink; } .wrapper.TableCell i.sub { display: inline-block; display: block; /*2种都行*/ } /*方案4 绝对定位====================*/ .wrapper.Absolute { position: relative; width: 100px; height: 100px; } .wrapper.Absolute i { position: absolute; width: 50px; height: 50px; } .wrapper.Absolute .ab1 { top: 50%; margin-top: -25px; } .wrapper.Absolute .ab2 { top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; } .wrapper.Absolute .ab22 { top: 0; bottom: 0; left: 0; right: 0; margin:auto; } .wrapper.Absolute .ab3 { top: 50%; height: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); } /*方案 padding & margin */ .wrapper.padding { padding: 20px; height: auto; } .wrapper.padding i { display: block; width: 50px; } .wrapper.margin { overflow: hidden; height: auto; *zoom: 1; } .wrapper.margin i { display: block; margin-top: 40px; margin-bottom: 40px; } .middlepic { width: 500px; height: 500px; border: 1px solid #f00; background: #B9D6FF url(http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg) no-repeat center center; text-align: center; line-height: 500px; } </style> </head> <body> <h1>inline && inline-block</h1> <p>最简单的文字&&行内元素居中 wrapper设置height和line-height 且height=line-height</p> <p>当某个元素文字有多行时 仅第一行文字居中 第二行则已经超出wrapper范围(因为多行时 每一行的高度都是父元素的高度)</p> <div> <div class="wrapper inline"> text <span>spantest</span> <span>spansdvknj </span> </div> <p>高度自适应版 也是终极方案的原理 子元素middle且inlineblock 待居中元素middle</p> <div class="wrapper inline1"> wet <span>dgsdf</span> <i></i> </div> </div> <h1>文字和行内元素居中改进型</h1> <p>子元素高度可为auto 且支持多行(但是使用br p之类的多行不行 这样会和第一种情况一样 第二行会超出父元素)</p> <p>父元素设置 height=line-height 待居中子元素都是 inline-block 且line-height变回normal 这样就可以多行</p> <p>多行的关键在于 inline-block 改成inline的话就又是第一种情况的样子</p> <div> <div class="wrapper InlineBlock"> text PS: 因为font-size: 0 所以看不见 <i>iiii</i> <span>span <p>span</p> span</span> <span>大家好大<br>家好大家好</span> <a href="xxx">aaaaa</a> <img src="" alt="" height="50px" width="20px" /> <img src="" alt="" height="30px" width="20px" /> </div> </div> <h1>inline block 终极版</h1> <p>终极版实际上是 方案1行高自适应版的改进以支持多行</p> <p>上面的已经很好了 但是需要知道父元素高度 这一版可以用于父元素告诉不固定的情况</p> <p>关键在于 创建middle且100%高度的子元素 待居中元素middle且inline-block</p> <div class="wrapper Final"> <i>这是一个终极实现的水平垂直居中实例</i> text <i>iiii</i> <span>span <p>span</p> span</span> <span>大家好大<br>家好大家好</span> <a href="xxx">aaaaa</a> <img src="" alt="" height="50px" width="20px" /> <img src="" alt="" height="30px" width="20px" /> <!--[if lt IE 8]><span></span><![endif]--> </div> <p>font-size 0不仅仅是消除间隔 vertical-align:middle的定义是：元素的中垂点与父元素的基线加1/2父元素中字母x的高度对齐。因此在font-size>0时，元素(指 span i这种 纯文本不算)将会在baseline上出现一定的偏移</p> <p>没有设置fontsize时</p> <div class="wrapper font1"> <i></i> </div> <p></p> <div class="wrapper font0"> <i></i> </div> <p>var f1 = document.querySelector('.wrapper.font1 i') ; f1.offSetTop来取值</p> <p>待居中的子元素需为什么要再次应用middle呢 方案1自适应版仅仅是父元素用了middle 那是因为没有子元素 text应该只算文本节点</p> <p>不信你去掉上面例子i元素的vertical-align试试</p> <h1>子元素绝对定位</h1> <p>2种 一种是top50%再负数margin 另一种是top0 bottom0 那么子元素需要设置高度</p> <p>第一种高度固定 子元素若改了高度还需要更改margin-left margin-top值才能保持居中 需计算</p> <div class="wrapper Absolute"> <i class="ab1">XXXX</i> </div> <p>无需计算 top0 bottom0 margin auto 原理 ‘top’ + ‘margin-top’ + ‘border-top’ + ‘padding-top’ + ‘height’ + ‘padding-bottom’ + ‘border-bottom’ + ‘margin-bottom’ + ‘bottom’ = 包含块的高度</p> <p>最后你会发现 浏览器自动计算了 margin的值 </p> <div class="wrapper Absolute"> <i class="ab2">XXXX</i> </div> <p>想要垂直 水平都居中的话</p> <div class="wrapper Absolute"> <i class="ab22">XXXX</i> </div> <p>针对第一种的改进 使用CSS3的transition 无需计算 且子元素高度可以是auto </p> <div class="wrapper Absolute"> <i class="ab3">ab3a b3ab 3ab3 </i> </div> <h1>Table cell 容器设置vertical-align 待居中元素可以是inline-block和block</h1> <p>子元素高度auto</p> <p>若子元素高于父元素 居中失效 即使父元素设置overflow也木有用 父元素会被撑开</p> <div class="wrapper TableCell"> <i class="sub">XXXX XXXX XXXX XXXX</i> </div> <h1>父子元素高度均不固定 可使用父元素等padding 或 子元素等margin</h1> <div class="wrapper padding"> <i><p>XXXX XXXX XX</p></i> </div> <p></p> <div class="wrapper margin"> <i><p>XXXX aa cbbb</p></i> </div> <p>PS</p> <p>* 父容器上下等padding时，父容器定高时，子容器溢出padding-edge的部分会被截断。</p> <p>* 子容器上下等margin时，父容器自适应于内部，父容器只会被撑高(即使设置height也无用)，永远无法被截断。</p> <h1>背景图片居中 (仅适合于图片比容器小的时候)</h1> <div class="middlepic"> </div> </body> </html>