6种CSS控制元素下上居中效果

2012-12-17

6种CSS控制元素上下居中效果通常我们用到的css布局都是左右居中，经典css写法如下： body{margin:0padding

6种CSS控制元素上下居中效果

通常我们用到的css布局都是左右居中，经典css写法如下：

body{ margin:0; padding:0; width:100%; height:100%; } div{ margin:0 auto; width:500px; heigth:auto; } 上面是经典的左右居中的css写法，那么像登录框那些比较小得div块只是左右居中是否不是太美观，如果上下左右都居中这是大多数网站的做法，下面是一个比较经典的div上下左右居中的css写法：
body{ margin:0; padding:0; width:100%; height:100%; } div{ position:absolute; top:50%; left:50%; margin-top:-250px; margin-left:-250px; /*此时宽和高都要固定*/ width:500px; heigth:500px; } 上面的margin可以合并：margin:-250px 0 0 -250px;大概原理就是：布局需用position，绝对布局absolute还是相对布局relative得看父容器，top，left相对于顶部和左部都相距整个容器的50%，然后在利用margin，向上回退div高的50%即：margin-top:-250px向左回退div宽的50%即：margin-left:-250px好了大功告成。内部元素不固定大小的情况：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

第3中方式

<body>

<div style="width:400px; height:400px; background:#99FF00;">
  <div style="width:100px; height:100px; position:relative; top:50%; left:50%; margin-left:-50px; background:#FF0000;">
   <div style="position:relative; margin-top:-50%; background:#CC9900;">
    asdfasdf;ajdslkas
    <br/>
    asfasdfas
   </div>
  </div>
</div>
</body>
</html>

第4中方式：

第5种

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body{
  margin:0px;
}
#container{
  position:absolute;
  width:100%;
  background-color:#808080;
  top:20%;
  bottom:20%;
  lex:expression(this.style.height=parseInt(document.body.clientHeight)-this.style.pixelTop*2);
}
</style>
</head>

第6种（IE内核的可以）

热点排行