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

来源：互联网发布：怎么删除淘宝已有地址编辑：程序博客网时间：2024/05/19 22:56

通常我们用到的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内核的可以）