位置：广州松河 > 技术支持 > div垂直居中 css div盒子上下垂直居中_CSS学习

div垂直居中 css div盒子上下垂直居中_CSS学习

来源：网络整理时间：2023/3/4 0:55:54 共 3635 浏览

div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中。

div垂直居中常用于单个盒子，如一个页面里只有一个登录布局，使用div css让这个登录布局水平和css垂直居中。

这里介绍一种最简单兼容性最好的水平居中与上下垂直居中的方法。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>上下垂直居中 在线演示 DIVCSS5</title> 
<style> 
#main {position: absolute;width:400px;height:200px;left:50%;top:50%; 
margin-left:-200px;margin-top:-100px;border:1px solid #00F} 
/*css注释：为了方便截图，对CSS代码进行换行*/ 
</style> 
<body> 
<div id="main">DIV水平居中和上下垂直居中</div> 
</body> 
</html>

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：CSS 纯CSS提示文字，问号弹出悬浮提示文字_CSS学习 | ·下一条：CSS 元素垂直居中的 6种方法_CSS学习