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

廢話少說直接上代碼咯：

/* 常用的三種方法 */

/* 第一種 */
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部分直接去實現去套吧

相關推薦：

CSS控制滾動條樣式的解析

CSS3自定義滾動條樣式的示例詳解

CSS設置div滾動條樣式的示例

以上就是css實現元素水平、垂直居中的詳細內容，更多請關注php中文網其它相關文章！