十一種花樣水平垂直居中方式(最後一個黑科技)

想必常常玩css佈局的你確定對前端中水平垂直居中有點頭疼,不用懼怕~~

如今由我爲你奉獻上11種水平垂直居中的css代碼:

/******** 如下爲公告部分代碼 **********/
div{
　　color: #fff;
}
.main{
　　position: relative;
　　width: 200px;
　　height: 200px;
　　border: 1px solid #36c;
　　margin-bottom: 20px;
}
.content{
　　width: 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;
    width: 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大會了 我看到好多前端大牛,好比說大漠,張鑫旭等人都將到場演講,因爲本人在北京,沒法去上海,感受是一種遺憾,但願到時候能看到視頻直播聽一聽~~~在上海的能夠去看看....悵惘中~~~