div垂直居中 css div盒子上下垂直居中-白红宇

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

阅读量：5253 次

发布时间：2019-06-14

本文共 877 字，大约阅读时间需要 2 分钟。

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

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

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

1、具体实例代码如下

<!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代码进行换行*/

</style>

<body>

<div id="main">DIV水平居中和上下垂直居中</div>

</body>

</html>

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

2、实例截图

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

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

3、水平垂直居中原理介绍

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