首頁  >  文章  >  web前端  >  css實現元素水平、垂直居中

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

韦小宝
韦小宝原創
2017-11-17 11:55:351670瀏覽

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

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

/* 常用的三种方法 */

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn