<style>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <!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>
- <title>使用margin:0 auto使页面内容居中</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <style type="text/css">
- div#wrap {
- width:760px;
- margin:0 auto;
- border:1px solid #333;
- background-color:#ccc;
- }
- </style>
- </head>
- <body>
- <div id="wrap">
- 在Firefox等现代浏览器设定页面元素的水平居中，只要指定margin:0 auto;即可
- <pre>
- div#wrap {
- width:760px;
- margin:0 auto; /*这里的0可以任意值*/
- border:1px solid #ccc;
- background-color:#999;
- }
- </pre>
- </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" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>居中div演示效果</title>
<style type="text/css">
.align-center{
margin:0 auto; /* 居中 这个是必须的，，其它的属性非必须 */
width:500px; /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */
background:red; /* 背景色 */
text-align:center; /* 文字等内容居中 */
}
</style>
</head>
<body>
<div class="align-center">居中div演示效果</div>
</body>
</html>
<div id="containingBlock">
<div><p>This sentence will change in each example</p> </div>
</div>.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="containingBlock">
<div><p>This sentence will change in each example</p> </div>
</div>
1 <div data-options="region:'north',border:false" >
2 <div id="navicatorbar" >
3 <i></i> <img src="../img/ep-logo.png"
4 />
5 </div>
6 </div>
<!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>
<title>
div中的内容垂直居中实例
</title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
div.demo{width: 240px;margin: 12px auto;border: 1px solid #1987df;color:
inherit;background: #CEE7FF} div#outerbox{height: 70px;position: relative;display:table}
div#outerbox div{position: absolute;top: 50%;left: 0} div#outerbox p{position:
relative;top: -50%;margin: 4px;text-indent: 0; font-size:14px;} div#outerbox>div{display:table-cell;vertical-align:middle;position:static}
</style>
</head>
<body>
<div class="demo" id="outerbox">
<div>
<p>
对于div中文字可以使其垂直居中,我要兼容IE和firefox!
</p>
</div>
</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>
<title>
div中的内容垂直居中实例
</title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
div.demo{width: 240px;margin: 12px auto;border: 1px solid #1987df;color:
inherit;background: #CEE7FF} div#outerbox{height: 70px;position: relative;display:table}
div#outerbox div{position: absolute;top: 50%;left: 0} div#outerbox p{position:
relative;top: -50%;margin: 4px;text-indent: 0; font-size:14px;} div#outerbox>div{display:table-cell;vertical-align:middle;position:static}
</style>
</head>
<body>
<div class="demo" id="outerbox">
<div>
<p>
对于div中文字可以使其垂直居中,我要兼容IE和firefox!
</p>
</div>
</div>
</body>
</html> div {
display: inline-block; /* 让 div 内容水平排列 */
}
input[type="checkbox"] {
display: inline-block; /* 使 input 与 label 内容水平对齐 */
vertical-align: middle; /* 垂直居中对齐 */
}
label {
display: inline-block; /* 使 input 与 label 内容水平对齐 */
vertical-align: middle; /* 垂直居中对齐 */
padding-bottom: 20px;
}
<html>
<head>
<style type="text/css">
.box {
width: 200px;
height: 200px;
border: 1px solid #000;
position: fixed;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
_position: absolute;
_top: expression(eval(document.documentElement.clientHeight/2+document.documentElement.scrollTop;));
_left: expression(eval(document.documentElement.clientWidth/2+document.documentElement.scrollLeft;));
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html> .main {
width: 100%;
margin: 0 auto;
.banner {
img {
width: 100%;
}
}
.article {
margin-bottom: 100px;
.title {
margin-top: 80px;
font-size: 36px;
font-weight: 500;
text-align: center;
}
.sub-title {
margin-top: 26px;
font-size: 18px;
font-weight: 400;
text-align: center;
color: #999999;
}
.slogan {
// 宽高
width: 1000px;
height: 82px;
// 布局
margin: 0 auto; /* div水平居中 */
margin-top: 30px;
text-align: center; /* 文字居中 */
line-height: 82px; /* 文字就垂直居中了 */
// 字体
font-size: 18px;
font-weight: 500;
// 其他
border-left: 1px solid #E6E6E6;
border-right: 1px solid #E6E6E6;
border-top: 1px solid #E6E6E6;
border-bottom: 4px solid #222222;
}
.content {
width: 1000px;
margin: 0 auto; /* div水平居中 */
margin-top: 60px;
font-size: 16px;
font-weight: 400;
color: #555555;
line-height: 32px;
p {
text-indent: 30px; /* 文本缩进 */
}
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本居中对齐</title>
<style>
h1 {
/* 本质是让h1盒子中的文字水平居中对齐 */
text-align:center;
}
<style type="text/css">
body{
text-align:center;
}
.divs{
margin:0 auto;
}
</style>
<body>
<div class="divs">CSS设置DIV居中</div>
</body>
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
