<!DOCTYPE html>
<html>
<head>
<style>
#all{
margin:0px auto;
width:500px; /* 必须制定宽度 */
height:200px;
background-color:blue;
}
</style>
</head>
<body>
<div id="all">
<div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
#all{
margin:0px auto;
width:500px; /* 必须制定宽度 */
height:200px;
background-color:blue;
}
#string{
margin:0px auto;
width:300px;
height:100px;
background-color:red;
text-align:center; /* 文字居中 */
font-size:32px; /* 文字大小 */
color:white; /* 文字颜色 */
}
</style>
</head>
<body>
<div id="all">
<div id="string">center<div>
<div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
#all{
margin:0px auto;
width:500px; /* 必须制定宽度 */
height:200px;
background-color:blue;
}
#string{
margin:0px auto;
width:300px; /* 必须制定宽度 */
height:100px;
background-color:red;
text-align:center; /* 文字居中 */
font-size:32px; /* 文字大小 */
color:white; /* 文字颜色 */
}
#image{
margin:0px auto;
width:300px; /* 必须制定宽度 */
background-color:white;
text-align:center; /* 图像居中 */
padding-top:20px; /* 图像上填充 */
padding-bottom:20px; /* 图像下填充 */
}
</style>
</head>
<body>
<div id="all">
<div id="string">center</div>
<div id="image"><img src="loader.gif"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
#all{
margin:0px auto;
width:500px; /* 必须制定宽度 */
height:200px;
background-color:blue;
}
</style>
</head>
<body>
<div id="all">
<!-- 表格在父窗体中居中 -->
<table width="80%" align="center" border="1">
<tbody>
<!-- 单元格居中 -->
<tr height="50px"><td align="center">文字居中</td></tr>
<tr height="50px"><td align="center"><img src="loader.gif"></td></tr>
</tbody>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
#all{
margin:0px auto;
width:500px; /* 必须制定宽度 */
height:200px;
background-color:blue;
}
/* 设置边框 */
table, th, td{
border: 1px solid black;
}
/* 设置table位置 */
table{
margin:0px auto; /* 效果等同 <tabel align="center">*/
width:80% /* 必须制定宽度 */
}
/* 单元格对齐 */
td{
text-align:center;
}
</style>
</head>
<body>
<div id="all">
<table>
<tbody>
<tr height="50px"><td>文字居中</td></tr>
<tr height="50px"><td><img src="loader.gif"></td></tr>
</tbody>
</table>
</div>
</body>
</html>HTML学习笔记——各种居中对齐,布布扣,bubuko.com
原文地址：http://blog.csdn.net/xukai871105/article/details/30115407
