在我們實(shí)際項(xiàng)目中，有很多關(guān)于垂直居中的方法，比如，在手機(jī)頁面中有很多的彈框提示內(nèi)容，簡(jiǎn)單整理如下，希望可以幫助到大家。
做了很多的頁面，感覺垂直居中這個(gè)問題一直存在，感覺有的方法比較簡(jiǎn)單，有的卻需要根據(jù)實(shí)際情況去算，我整理的是我在實(shí)際中使用過的方法，可能不是最全面的，但實(shí)操效果還是不錯(cuò)的喲。

廢話少說直接上代碼咯：

/* 常用的三種方法 */

/* 第一種 */
div{
	width: 200px;
	height: 200px;
	margin: auto;
	background: pink;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
/* 第二種 */
div{
	width: 200px;
	height: 200px;
	background: green;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -100px;
	margin-top: -100px;
}
/* 第三種 */
div{
	width: 200px;
	height: 200px;
	background: green;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

html部分直接去實(shí)現(xiàn)去套吧

相關(guān)推薦：

CSS控制滾動(dòng)條樣式的解析

CSS3自定義滾動(dòng)條樣式的示例詳解

CSS設(shè)置div滾動(dòng)條樣式的示例

以上就是css實(shí)現(xiàn)元素水平、垂直居中的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！