总结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 许可协议。转载请注明出处！