总结css垂直居中的几十种办法,更新中...
平常我们写页面的时候,经常碰到要垂直居中一个模块或是文字,或是图片等等,经常会用到的一些办法,还有其他地方看到的一些办法比较少用的都有,下面总结一下:
1、Line-height
适用情景:单行文字垂直居中技巧,这种办法只适用单行文本展示,多行就不能了,行高好大,这个兼容所有浏览器.
<div class="content">前端范</div>
.content{ width: 400px; background: #ccc; line-height:100px; margin: auto; }
2、Line-height + inline-block
适用情景:多对象的垂直居中技巧(ie浏览器兼容ie8以上,ie7不兼容inline-block属性.)
<h2>line-height + inline-block</h2> <div class="box box2"> <div class="content"><a href="http://www.cssfan.cn">前端范</a></div> </div>
.box{ width: 500px; border: 1px solid #f00; margin: auto; line-height: 200px; text-align: center; } .box2 .content{ display: inline-block; height: auto; line-height:1; width: 400px; background: #ccc; }
3、:before + inline-block
适用情景:多对象的CSS垂直居中技巧(兼容ie9以上,ie8以下不兼容伪类元素)
<h2>3.:before + inline-block</h2> <div class="box box3"> <div class="content">http://www.cssfan.cn</div> </div>
.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; text-align: center; } .box::before{ content:''; display: inline-block; height: 100%; width: 0; vertical-align: middle; } .box .content{ width: 400px; background: #ccc; display: inline-block; vertical-align: middle; }
4、absolute + margin 负值
适用情景:多行文字的垂直居中技巧,高度固定大小.(兼容ie7以上),唯一缺点就是要知道高度大小,这种办法适用于固定高度的浮动弹窗.
<h2>4.absolute + margin 負值</h2> <div class="box box4"> <div class="content">前端范</div> </div>
.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; position: relative; } .box4 .content{ width: 400px; background: #ccc; height: 70px; position: absolute; top:50%; left: 50%; margin-left: -200px; margin-top: -35px; }
5、absolute + margin auto
适用情景:多行文字的垂直居中技巧(兼容ie8以上)
<h2>5.absolute + margin: auto</h2> <div class="box box5"> <div class="content">前端范 cssfan.cn</div> </div>
.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; position: relative; } .content{ width: 400px; background: #ccc; height: 70px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
6、absolute + translate
适用情景:多行文字的垂直居中技巧(translate属于css3属性,兼容ie9以上)
<h2>6.absolute + translate(-50%, -50%)</h2> <div class="box box6"> <div class="content">前端范 cssfan.cn</div> </div>
.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; position: relative; } .box5 .content{ width: 400px; background: #ccc; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); }
7、Flex + align-items
适用情景:多行文字的垂直居中技巧(弹性布局flex属性,兼容ie10以上,如果要浏览器兼容好的话,不建议适用,如果追求高浏览器比较谷歌那种的话,建议使用,比较方便)
<h2>7.Flex + align-items</h2> <div class="box box7"> <div class="content">前端范 cssfan.cn </div> </div>
.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: flex; justify-content: center; align-items: center; } .content{ width: 400px; background: #ccc; }
8、Flex + :before + flex-grow
适用情景:多行文字的垂直居中技巧(所有的ie都不兼容,谷歌可以)
<h2>8.Flex + before + flex-grow</h2> <div class="box box8"> <div class="content">前端范</div> </div>
.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: flex; flex-direction: column; align-items: center; } .box:before{ content: ''; flex-grow: .5; } .content{ width: 400px; background: #ccc; }
9、Flex + margin
适用情景:多行文字的垂直居中技巧(所有的ie都不兼容,谷歌可以)
<h2>9.Flex + margin</h2> <div class="box box9"> <div class="content">前端范</div> </div>
.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: flex; } .content{ width: 400px; background: #ccc; margin: auto; }
10、Flex + align-self
适用情景:多行文字的垂直居中技巧(兼容ie10以上)
<h2>10.Flex + align-self</h2> <div class="box box10"> <div class="content">前端范</div> </div>
.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: flex; justify-content: center; } .content{ width: 400px; background: #ccc; align-self: center }
11、Flex + align-content
适用情景:多行文字的垂直居中技巧(兼容ie10以上)
<h2>11.Flex + align-content</h2> <div class="box box11"> <div class="content">前端范 </div> </div>
.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; } .content{ width: 400px; background: #ccc; } .box11:before, .box11:after{ content: ''; display: block; width:100%; }
12、Grid + template
适用情景:多行文字的垂直居中技巧(所有ie都不兼容,谷歌可以)
<h2>12.Grid + template</h2> <div class="box box12"> <div class="content">前端范</div> </div>
.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: grid; grid-template-rows: 1fr auto 1fr; grid-template-columns: 1fr auto 1fr; grid-template-areas: '. . .' '. amos .' '. . .'; } .content{ width: 400px; background: #ccc; grid-area: amos; }
13、Grid + align-items
适用情景:多行文字的垂直居中技巧(所有ie不兼容,谷歌可以)
<h2>13.Grid + align-items</h2> <div class="box box13"> <div class="content">前端范</div> </div>
.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: grid; justify-content: center; align-items: center; } .content{ width: 400px; background: #ccc; }
14、Grid + align-content
适用情景:杜航文字的垂直居中技巧(所有ie不兼容,谷歌可以)
<h2>14.Grid + align-content</h2> <div class="box box14"> <div class="content">前端范</div> </div>
.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: grid; justify-content: center; align-content: center; } .content{ width: 400px; background: #ccc; }
15、Grid + align-self
适用情景:多行文字的垂直居中技巧 (所有ie不兼容,谷歌可以)
<h2>15.Grid + align-self</h2> <div class="box box15"> <div class="content">前端范</div> </div>
.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: grid; justify-content: center; } .content{ width: 400px; background: #ccc; align-self: center; }
16、Grid + place-items
适用情景:多行文字的垂直居中技巧 (所有ie不兼容,谷歌可以)
place-items这属性不知道有多少人用过,此属性是align-items与justify-items的缩写,简单的说就是水平与垂直的对齐方式,想当然的,设定center就能居中
<h2>16.Grid + place-items</h2> <div class="box box16"> <div class="content">前端范</div> </div>
.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: grid; height: 150px; margin: 0 auto; place-items: center; } .content{ width: 400px; background: #ccc; }
17、Grid + place-content
适用情景:多行文字的垂直居中技巧 (所有ie不兼容,谷歌可以)
place-content这属性有多少人用过,此属性是align-content与justify-content的缩写,简单的说就是水平与垂直的对齐方式,想当然的,设置center就能居中了
<h2>17.Grid + place-content</h2> <div class="box box17"> <div class="content">前端范</div> </div>
.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: grid; height: 150px; margin: 0 auto; place-content: center; } .content{ width: 400px; background: #ccc; }
18、Grid + margin
适用情景:多行文字的垂直居中技巧(所有ie不兼容,谷歌可以)
<h2>18.Grid + margin</h2> <div class="box box18"> <div class="content">前端范</div> </div>
.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; display: grid; } .content{ width: 400px; background: #ccc; margin:auto; }
19、Display:table-cell
适用情景:多行文字的垂直居中技巧 (兼容ie8以上)
<h2>19.display: table-cell</h2> <div class="box box19"> <div class="content">前端范 </div> </div>
.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; text-align: center; display: table-cell; vertical-align: middle; } .content{ width: 400px; background: #ccc; margin: auto; }
20、calc
适用情景:多行文字的垂直居中技巧 (兼容ie9以上)
<h2>20.calc</h2> <div class="box box20"> <div class="content">前端范</div> </div>
.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; } .content{ width: 400px; background: #ccc; position: relative; top:calc((100% - 70px) / 2); margin:auto; height: 70px; }
21、Relative + translateY
适用情景:多行文字的垂直居中技巧(兼容ie7以上)
<h2>21.relative + translateY(-50%)</h2> <div class="box box21"> <div class="content">前端范</div> </div>
.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; } .content{ width: 400px; background: #ccc; position: relative; top: 50%; transform: translateY(-50%); margin: auto; }
22、padding
适用情景:多行文字的垂直居中技巧(兼容ie7以上)
<h2>22.padding</h2> <div class="box box22"> <div class="content">前端范</div> </div>
.box{ width: 500px; border: 1px solid #f00; margin: auto; height: auto; padding: 50px 0; } .content{ width: 400px; background: #ccc; margin: auto; }
23、Write-mode
适用情景:多行文字的垂直剧种技巧(兼容ie8以上)
这个方式应该是比较少见到的有人使用的了,这个想法是被老友Paul所激发的,write-mode这个css属性的功能基本上跟垂直居中是八竿子打不着,它的用途是改变文字书写的方向从横变竖,且支持度从很早期的IE5就有支持了,但当时Amos很少使用,一来是网页多是横书较多,另外当时除了IE浏览器意外,其他浏览器的支持度都不是很好,也就很少使用了。
使用write-mode将一整个文字容器变成直书,接着将此容器利用text-align:center来达到垂直居中的目的,白话一点的解说就是,你把原本横排的文字变成竖排,所以原本横排用到的水平对齐方式,就变成了控制直排的中间了,原理就是这么简单。但要特别注意的是浏览器对此语法的支持度来说,需要拆开写法才行,不然某些浏览器的语法不同,可能会让你的网页在某些浏览器上看起来无效,这会是最需要注意到的
<h2>23.writing-mode</h2>立马来看Amos实际完成的 <div class="box box23"> <div class="content"> <div class="txt">前端范 </div> </div> </div>
.box{ width: 500px; height: 250px; border: 1px solid #f00; margin: auto; writing-mode: tb-lr; /* for ie11 */ writing-mode: vertical-lr; text-align: center; margin:0 auto; } .content{ width: 400px; background: #ccc; display: inline-block; /* for ie & edge */ width: 100%; writing-mode: lr-tb; margin: auto; text-align: left; } .box .txt{ width: 80%; margin: auto; }
你总共用过几种写法呢?
看完了这23中css垂直居中写法,不知道你用过哪几种呢?是否你也有不为人知的小技巧呢?
总结一下上面办法,关于css3一些属性比如translate之类的一般是兼容ie9以上,flex兼容ie10以上,grid的办法ie不兼容.
本文作者: Jasmine
本文链接: https://www.jianbaizhan.com/article/625
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!