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>
??????? ?<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>
<!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>
<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>
總結
以上是生活随笔為你收集整理的6种CSS控制元素上下居中效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 辣根是什么 介绍辣根的来源、特点和用途？
- 下一篇： 网店代运营一年的费用 还能让被人给经营网