div垂直居中 css div盒子上下垂直居中

顺晟科技

2022-09-14 11:01:51

176

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

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

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

1、具体实例代码如下

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

这里设置一个“#main”对象样式，宽400px,高200px，使用了绝对定位position样式同时使用绝对定位left和top，并且同时设置margin-top和margin-left,为了观察到效果，所以对此div盒子加了个红色边框。

2、实例截图

div+css实现div对象同时上下垂直居中和水平居中截图

3、水平垂直居中原理介绍
这里使用了绝对定位position:absolute，使用left和top设置对象距离上和左为50%，但如果设置50%，实际上盒子是没有实现居中效果，所以又设置margin-left:-200px;margin-top:-100px;，这里有个技巧是，margin-left的值是宽度一半，margin-top的值也是对象高度一半，同时设置为负，这样就实现了水平和垂直居中。

相关CSS教程推荐：
1）、CSS图片居中
2）、html文字居中
3）、css字体居中
4)、div水平居中
5）、css字体垂直居中
6）、div css布局居中代码
7）、ie9文字字体垂直居中

4、在线演示：查看案例

5、完整案例html+css打包下载：

立即下载（0.589KB）

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/jiqiao/j645.shtml

上一篇：css3 flex 详解,可以实现d 下一篇：CSS——div垂直居中及div内文

网站建设

Css

div垂直居中 css div盒子上下垂直居中