行内元素水平居中
把行内元素包裹在块级父元素中，且父元素中的css设置text-align:center;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>css水平垂直居中</title>
<style>
body{background:#000;}
#container{
background: #ccc;
text-align: center;
}
</style>
</head>
<body>
<div id="container">行内元素水平居中</div>
</body>
</html>
块状元素水平居中
将块状元素的左右外边距设置为auto即可。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>块状元素水平居中</title>
<style>
body{background:#000;}
#container{
background: #ccc; }
#box1{
width:300px;
height:300px;
background:#fff;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<div id="box1">块状元素水平居中</div>
</div>
</body>
</html>
多个块状元素水平居中的情况：
1、传统方法：将水平排列的块状元素设置为：display：inline-block；然后父元素设置为text-align:center;即可。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>多个块状元素水平居中</title>
<style>
body{background:#000;}
#container{
background: #ccc;
text-align: center;
}
.box1{
width:300px;
height:300px;
background:#fff;
display: inline-block;
}
</style>
</head>
<body>
<div id="container">
<div class="box1">块状元素水平居中</div>
<div class="box1">块状元素水平居中</div>
<div class="box1">块状元素水平居中</div>
</div>
</body>
</html>
2、使用弹性盒子：将父元素设置为display：-webkit-box；-webkit-box-pack：justify（或center）；注意兼容性
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>多个块状元素水平居中</title>
<style>
body{background:#000;}
#container{
background: #ccc;
display: -webkit-box;
-webkit-box-pack:justify;/*box-pack决定了父元素水平空间的使用*/
}
.box1{
width:300px;
height:300px;
background:#fff;
}
</style>
</head>
<body>
<div id="container">
<div class="box1">块状元素水平居中</div>
<div class="box1">块状元素水平居中</div>
<div class="box1">块状元素水平居中</div>
</div>
</body>
</html>
已知元素宽高水平垂直居中
1、绝对定位与margin
这个方法使用了position:absolute;有固定宽高的div，被设置为top：0；bottom:0;因为它有固定高度，不能与上下的间距都为0，margin：auto；会使它居中。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>多个块状元素水平居中</title>
<style>
body{background:#000;}
#container{
background: #ccc;
position: relative;
width:1000px;
height:500px;
}
.box1{
position: absolute;
background:#fff;
width: 300px;
height: 300px;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto; }
</style>
</head>
<body>
<div id="container">
<div class="box1">已知元素宽高水平垂直居中</div>
</div>
</body>
</html>
2、绝对定位与margin负值
利用绝对定位，将元素的top、left值设为50%，然后设置外边距margin-left：width/2；margin-top:height/2；实现垂直居中效果
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>多个块状元素水平居中</title>
<style>
body{background:#000;}
#container{
background: #ccc;
position: relative;
width:1000px;
height:500px;
}
.box1{
position: absolute;
background:#fff;
width: 300px;
height: 300px;
top: 50%;
left: 50%;
margin-left:-150px;
margin-top:-150px;
}
</style>
</head>
<body>
<div id="container">
<div class="box1">已知元素宽高水平垂直居中</div>
</div>
</body>
</html>
未知元素宽高水平垂直居中
1、把div的显示方式设置为表格，使用表格的vertical-align属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>未知宽高的元素水平垂直居中</title>
<style>
body{background: #000;font-size: 24px;}
#wrapper{
display: table;
background: #ccc;
width: 1000px;
height:300px; }
#cell{
display: table-cell;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="cell">
<div class="content">未知宽高的元素水平垂直居中</div>
</div>
</div>
</body>
</html>
2、跟上面提到的多个块状元素水平居中的用法差不多，这里用到弹性盒子是要注意浏览器的兼容性；（这里被居中元素的宽度由其里面的内容决定）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>未知宽高的元素水平垂直居中</title>
<style>
body{background: #000;font-size: 24px;}
#container{
margin:30px auto;
background: #ccc;
width: 1000px;
height:300px;
display: -webkit-box;
-webkit-box-pack:center;
}
#container .box1{
background: red;
}
#container .box2{
background: green;
}
#container .box3{
background: yellow;
}
</style>
</head>
<body>
<div id="container">
<div class="box1">未知宽高的元素水平垂直居中</div>
<div class="box2">未知宽高的元素水平垂直居中</div>
<div class="box3">未知宽高的元素水平垂直居中</div>
</div>
</body>
</html>
