css完成元素水平、垂直居中1

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

在我们实际项目中，有很多关于垂直居中的方法，比如，在手机页面中有很多的弹框提示内容，简单整理如下，希望可以帮助到大家。
做了很多的页面，感觉垂直居中这个问题一直存在，感觉有的方法比较简单，有的却需要根据实际情况去算，我整理的是我在实际中使用过的方法，可能不是最全面的，但实操效果还是不错的哟。

废话少说直接上代码咯：

/* 常用的三种方法 */

/* 第一种 */
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中文网其它相关文章！

网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。

……

标签:css完成元素水平、垂直居中