css實現元素水平、垂直居中

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

廢話少說直接上程式碼咯：

/* 常用的三种方法 */

/* 第一种 */
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中文網其他相關文章！