主要介绍四种居中方式,比较常用的:
1.margin:0 auto;
2.line-height;text-align:center;
3.table演变的居中
4.利用伸缩盒子box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body
{
margin:0;
padding:0;
}
.contian
{
width:100%;
height:100px;
background-color: blue;
min-width: 980px;
}
.header
{
width:80%;
height:100px;
background-color:yellow;
min-width: 980px;
margin:0 auto;
text-align: center;
}
ul
{
line-height: 100px;
}
ul li
{
display: inline-block;
}
</style>
</head>
<body>
<div class="contian">
<div class="header">
<ul>
<li>列表</li>
<li>列表</li>
<li>列表</li>
<li>列表</li>
</ul>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body
{
margin:0;
padding:0;
}
.contian
{
display:table;
/*显示成表格*/
width:100%;
height:100px;
background-color: blue;
min-width: 980px;
}
p
{
display: table-cell;
/*显示成单元格*/
background-color:yellow;
text-align: center;
vertical-align:middle;
}
</style>
</head>
<body>
<div class="contian">
<p>呵呵呵</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer
{
width: 500px;
height: 400px;
background-color: #ddeeff;
display: -webkit-box;
-webkit-box-pack:center;
/*水平居中*/
-webkit-box-align:center;
/*垂直居中*/
}
.inner
{
width: 300px;
height: 200px;
background-color: #ccee33;
display: -webkit-box;
-webkit-box-pack:center;
/*水平居中*/
-webkit-box-align:center;
/*垂直居中*/
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
独立之精神,<br>
自由之思想。
</div>
</div>
</body>
</html>
第一个代码包含一二