6种CSS控制元素下上居中效果
日期：2014-05-17 浏览次数：20615 次
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"%>
<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>
<
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
