6种CSS控制元素上下居中效果
2012-12-05 19:56
633 查看
通常我们用到的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"%>
<html>
<head>
<title>登录</title>
</head>
<body>
<center>
<div style="position: absolute; top: 50%;">
<div style="position: relative; left:-50%; top:-50%; width:300px;height:200px; background:url(${pageContext.request.contextPath}/images/beijing.jpg);">
<table>
<tr>
<td>帐号：</td>
<td><input type="text" name="textfield" style="width:105px; height:17px; background-color:#292929; border:solid 1px #7dbad7; font-size:12px; color:#6cd0ff"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="textfield2" style="width:105px; height:17px; background-color:#292929; border:solid 1px #7dbad7; font-size:12px; color:#6cd0ff"></td>
</tr>
<tr>
<td><input type="submit" value="登录"></td>
<td><input type="submit" value="注册"></td>
</tr>
</table>
</div>
</div>
</center>
</body>
</html>
第3中方式
<!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>
</head>
<body>
<!--
<div style="width:400px; height:400px; background:#99FF00;">
<div style="width:100px; height:100px; position:relative; top:50%; left:50%;">
<div style="position:relative; margin-left:-50%; margin-top:-50%; background:#CC9900;">
asdfasdf;ajdslkas
</div>
</div>
</div>
<br/><br/>
<hr/><hr/>
<div style="width:400px; height:400px; background:#99FF00;">
<div style="position:relative; top:50%; background:#CC9900;">
<div style="background:#FF0000; width:100px; height:100px; position:relative; margin-top:-50%;">safasd</div>
</div>
</div>
-->
<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中方式：
<!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>
</head>
<body style="text-align: center;">
<div
style="width:300px;height:200px;background:url(beijing.jpg) no-repeat; position: absolute; top:50%;margin-top:-100px; left:50%; margin-left:-150px;">
<table align="center">
<div>
<tr>
<td>
帐号：
</td>
<td>
<input type="text" name="textfield"
style="width: 105px; height: 17px; background-color: #292929; border: solid 1px #7dbad7; font-size: 12px; color: #6cd0ff">
</td>
</tr>
<tr>
<td>
密码：
</td>
<td>
<input type="password" name="textfield2"
style="width: 105px; height: 17px; background-color: #292929; border: solid 1px #7dbad7; font-size: 12px; color: #6cd0ff">
</td>
</tr>
<tr>
<td>
<input type="submit" value="登录">
</td>
<td>
<input type="submit" value="注册">
</td>
</tr>
</div>
</table>
</div>
</body>
</html>
第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>
<body>
<div id="container" style="top:20%;">
1234567890
</div>
</body>
</html>
第6种（IE内核的可以）
<html>
<head>
<title>登录</title>
</head>
<body>
<table style="vertical-align:middle;width=100%;height=100%;text-align:center;">
<tr><td>
<table
style="width:300px;height:200px;text-align:center;background:url(beijing.jpg);">
<tr><td>
<table>
<tr>
<td>
帐号：
</td>
<td>
<input type="text" name="textfield"
style="width: 105px; height: 17px; background-color: #292929; border: solid 1px #7dbad7; font-size: 12px; color: #6cd0ff">
</td>
</tr>
<tr>
<td>
密码：
</td>
<td>
<input type="password" name="textfield2"
style="width: 105px; height: 17px; background-color: #292929; border: solid 1px #7dbad7; font-size: 12px; color: #6cd0ff">
</td>
</tr>
<tr>
<td>
<input type="submit" value="登录">
</td>
<td>
<input type="submit" value="注册">
</td>
</tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>
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"%>
<html>
<head>
<title>登录</title>
</head>
<body>
<center>
<div style="position: absolute; top: 50%;">
<div style="position: relative; left:-50%; top:-50%; width:300px;height:200px; background:url(${pageContext.request.contextPath}/images/beijing.jpg);">
<table>
<tr>
<td>帐号：</td>
<td><input type="text" name="textfield" style="width:105px; height:17px; background-color:#292929; border:solid 1px #7dbad7; font-size:12px; color:#6cd0ff"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="textfield2" style="width:105px; height:17px; background-color:#292929; border:solid 1px #7dbad7; font-size:12px; color:#6cd0ff"></td>
</tr>
<tr>
<td><input type="submit" value="登录"></td>
<td><input type="submit" value="注册"></td>
</tr>
</table>
</div>
</div>
</center>
</body>
</html>
第3中方式
<!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>
</head>
<body>
<!--
<div style="width:400px; height:400px; background:#99FF00;">
<div style="width:100px; height:100px; position:relative; top:50%; left:50%;">
<div style="position:relative; margin-left:-50%; margin-top:-50%; background:#CC9900;">
asdfasdf;ajdslkas
</div>
</div>
</div>
<br/><br/>
<hr/><hr/>
<div style="width:400px; height:400px; background:#99FF00;">
<div style="position:relative; top:50%; background:#CC9900;">
<div style="background:#FF0000; width:100px; height:100px; position:relative; margin-top:-50%;">safasd</div>
</div>
</div>
-->
<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中方式：
<!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>
</head>
<body style="text-align: center;">
<div
style="width:300px;height:200px;background:url(beijing.jpg) no-repeat; position: absolute; top:50%;margin-top:-100px; left:50%; margin-left:-150px;">
<table align="center">
<div>
<tr>
<td>
帐号：
</td>
<td>
<input type="text" name="textfield"
style="width: 105px; height: 17px; background-color: #292929; border: solid 1px #7dbad7; font-size: 12px; color: #6cd0ff">
</td>
</tr>
<tr>
<td>
密码：
</td>
<td>
<input type="password" name="textfield2"
style="width: 105px; height: 17px; background-color: #292929; border: solid 1px #7dbad7; font-size: 12px; color: #6cd0ff">
</td>
</tr>
<tr>
<td>
<input type="submit" value="登录">
</td>
<td>
<input type="submit" value="注册">
</td>
</tr>
</div>
</table>
</div>
</body>
</html>
第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>
<body>
<div id="container" style="top:20%;">
1234567890
</div>
</body>
</html>
第6种（IE内核的可以）
<html>
<head>
<title>登录</title>
</head>
<body>
<table style="vertical-align:middle;width=100%;height=100%;text-align:center;">
<tr><td>
<table
style="width:300px;height:200px;text-align:center;background:url(beijing.jpg);">
<tr><td>
<table>
<tr>
<td>
帐号：
</td>
<td>
<input type="text" name="textfield"
style="width: 105px; height: 17px; background-color: #292929; border: solid 1px #7dbad7; font-size: 12px; color: #6cd0ff">
</td>
</tr>
<tr>
<td>
密码：
</td>
<td>
<input type="password" name="textfield2"
style="width: 105px; height: 17px; background-color: #292929; border: solid 1px #7dbad7; font-size: 12px; color: #6cd0ff">
</td>
</tr>
<tr>
<td>
<input type="submit" value="登录">
</td>
<td>
<input type="submit" value="注册">
</td>
</tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- css3 上下左右居中子元素的方法
- css控制元素垂直和水平居中
- CSS 元素垂直居中的 6种方法
- CSS 元素垂直居中的 6种方法
- CSS 元素垂直居中的 6种方法
- HTML CSS 控制浮动元素居中
- CSS 元素垂直居中的 6种方法
- CSS 元素垂直居中的 6种方法
- CSS 元素垂直居中的 6种方法
- CSS 元素垂直居中的 6种方法
- css---flex布局中，如何响应式 得水平垂直居中？flex子元素左右 上下居中
- CSS 元素垂直居中的 6种方法
- [转]-CSS 元素垂直居中的6种方法
- 【个人笔记重点，不作为参考】主题：CSS 元素垂直居中的 6种方法
- CSS控制所有浏览器水平居中和控制链接不换行的效果
- css元素垂直居中的6种方法
- css控制div中元素居中的示例
- 图片自适应父元素大小，并左右上下居中的css方法
- css 宽高未知的子元素在父容器上下左右居中
- css实现内容上下左右居中的效果