十一种花样水平垂直居中方式(最后一个黑科技)

想必经常玩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大会了 我看到好多前端大牛,比如说大漠,张鑫旭等人都将到场演讲,由于本人在北京,无法去上海,感觉是一种遗憾,希望到时候能看到视频直播听一听~~~在上海的可以去看看....怅惘中~~~