想必经常玩css布局的你肯定对前端中水平垂直居中有点头疼,不用害怕~~
现在由我为你奉献上11种水平垂直居中的css代码:
/******** 以下为公告部分代码 **********/
div{ color: #fff; } .main{ position: relative; 200px; height: 200px; border: 1px solid #36c; margin-bottom: 20px; } .content{ 100px; height: 100px; background: #666; }
1.利用绝对定位 absolute + 负margin实现垂直居中
css代码部分:
.ab_minus_margin{
position: absolute;;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
html代码:
<div class="main"> <div class="content ab_minus_margin"> absolute + 负margin </div> </div>
2.利用绝对定位 absolute + margin:auto 实现
css代码:
.ab_auto_margin{
position: absolute;;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
html代码:
<div class="main"> <div class="content ab_auto_margin"> absolute + margin auto </div> </div>
3.利用 absolute + calc 实现:
css代码:
.ab_calc{
position: absolute;;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
html代码:
<div class="main"> <div class="content ab_calc"> absolute + calc </div> </div>
4.利用 absolute + transform 实现:
css代码:
.ab_transtrom{
position: absolute;;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
html代码:
<div class="main"> <div class="content ab_transtrom"> absolute + transform </div> </div>
5.利用 display:table-cell 实现
css代码:
.table_table_father{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.css_table_son{
display: inline-block;
color: #fff;
}
html代码:
<div class="main table_table_father"> <div class="content css_table_son"> css-table </div> </div>
6.利用 flex 布局实现:
css代码:
.flex{
display: flex;
justify-content: center;
align-items: center;
}
html代码:
<div class="main flex"> <div class="content"> flex </div> </div>
7.利用网格布局 grid 实现:
css代码:
.grid{
display: grid;
}
.grid_son{
align-self: center;
justify-self: center;
}
html代码:
<div class="main grid"> <div class="content grid_son"> grid </div> </div>
8.利用 line-hright 实现:
css代码:
.lineHeight{
line-height: 200px;
text-align: center;
font-size: 0px;
}
.lineHeight_son{
font-size: 16px;
display: inline-block;
vertical-align: middle;
line-height: initial;
}
html代码:
<div class="main lineHeight"> <div class="content lineHeight_son"> line-height </div> </div>
9.利用 table 的特性实现:
css代码:
.table{
text-align: center;
}
.table_son{
display: inline-block;
}
html代码:
<table> <tbody> <tr> <td class="main table"> <div class="content table_son"> table </div> </td> </tr> </tbody> </table>
10.利用 writing-mode 实现:
css代码:
.wr_mode{
writing-mode: vertical-lr;
text-align: center
}
.wr_inner{
writing-mode: horizontal-tb;
display: inline-block;
text-align: center;
100%;
}
.wr_son{
display: inline-block;
margin: auto;
text-align: left;
}
html代码:
<div class="main wr_mode"> <div class="wr_inner"> <div class="content wr_son"> writing-mode </div> </div> </div>
11.利用svg的 offset-path 实现(黑科技,纯属娱乐):
css代码:
.offsetPath{
offset-path: path("M100,-100 q50,0 150,100 q0,0 0,0");
}
html代码:
<svg width="200" height="200" style="border: 1px red solid;"> <div class="content offsetPath">svg</div> </svg>
看完上述的各种各样的垂直居中,是不是感觉css很高深莫测,对于我来说,一入前端深似海,再也难爬出来~~
对于最后两个,大家可能不是很熟悉~~,可以参考mdn或者张鑫旭的css世界可以更彻底的学习,当然张鑫旭也有自己的博客写了不少~~有兴趣的可以多去看看了解学习
对了 马上就要开始 css大会了 我看到好多前端大牛,比如说大漠,张鑫旭等人都将到场演讲,由于本人在北京,无法去上海,感觉是一种遗憾,希望到时候能看到视频直播听一听~~~在上海的可以去看看....怅惘中~~~