问题:一段时间以来,发觉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;
}
我试了,就方案四和方案五还可以实现,其它三种方案怎么都没有出效果,如果有知情者望不吝相告。