div+css居中实践

wyzxzws

浏览: 394489 次
性别:
来自: dazhou

最近访客更多访客>>

zjut_wyj

cooperay

wh1978

bety

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

自己编写
转载文章

问题：一段时间以来，发觉div+css居中问题越来越被关注了，看了几个博客，果断验证了一下；

解决方案：图片：见附件，我测试了ie10和chrome27.0.1453.12

方案一：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link type="text/css" href="css/div-css-center1.css" rel="stylesheet" />
</head>
<body>
	<div id="wrapper">
		<div id="cell">
			<div class="content">Content goes here</div>
		</div>
	</div>
</body>
</html>

css:代码：

@CHARSET "UTF-8";

body {
	background-color: gray;
}

#wraper {
	display: table;
}

#cell {
	display: table-cell;
	vertical-align: middle;
	background-color: white;
}

方案二

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link type="text/css" href="css/div-css-center2.css" rel="stylesheet" />
</head>
<body>
	<div class="content">Content goes here</div>
</body>
</html>
css代码：
@CHARSET "UTF-8";

body {
	background-color: gray;
	text-align: center;
}

#content,.content {
	position: absolute;
	top: 50%;
	/* 	left: 50%; */
	/* 	width: 500px; */
	height: 240px;
	margin-top: -120px;
	text-align: center;
	background-color: white;
	height: 240px;
	height: 240px;
}

方案三：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link type="text/css" href="css/div-css-center3.css" rel="stylesheet" />
</head>
<body>
	<div id="floater"></div>
	<div id="content">Content here</div>
</body>
</html>
css代码：
@CHARSET "UTF-8";

body {
	background-color: gray;
}

#floater {
	float: left;
	height: 50%;
	margin-bottom: -120px;
}

.content,#content {
	clear: both;
	height: 240px;
	position: relative;
	background-color: white;
}

方案四：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link type="text/css" href="css/div-css-center4.css" rel="stylesheet" />
</head>
<body>
	<div id="content">Content here</div>
</body>
</html>
css代码：
@CHARSET "UTF-8";

body {
	background-color: gray;
}

.content,#content {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	height: 240px;
	width: 200px;
	background-color: white;
}

方案五：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link type="text/css" href="css/div-css-center5.css" rel="stylesheet"/>
</head>
<body>
	<div id="content">Content here</div>
</body>
</html>
css代码 ：
@CHARSET "UTF-8";

body {
	background-color: gray;
}

.content, #content {
	height: 100px;
	line-height: 100px;
	text-align : center;
	background-color: white;
}

我试了，就方案四和方案五还可以实现，其它三种方案怎么都没有出效果，如果有知情者望不吝相告。