关于如何在div中居中一个元素，应该是一个前段开发者在前前期常遇到的问题，下面我总结了一下我知道的和大家分享，当然，如果写的不对，还请大家留言指点。
居中一般都是在块元素中居中的
1.元素中 只有文本或者元素是内联元素
实例
<style type="text/css">
div{
width:600px;
height: 100px;
background-color: #444444;
display: table-cell;
/*表格样式 display: table-cell;*/
vertical-align: middle;
/*使当前元素内的内容上下居中 vertical-align: middle;*/
text-align: center;
/*文本居中*/
/*这三句代码可使当前元素内的文本上下左右居中*/
}
</style>
<div>
元素
</div>运行实例 »
点击 "运行实例" 按钮查看在线实例
也可以给元素添加一个p标签
2.里面包裹着一个块元素
实例
<style type="text/css">
.box{
width:600px;
height: 100px;
background-color: #444444;
display: table-cell;
/*表格样式 display: table-cell;*/
vertical-align: middle;
/*使当前元素内的内容上下居中 vertical-align: middle;*/
}
.box1{
width: 20px;
height: 30px;
margin: auto;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>运行实例 »
点击 "运行实例" 按钮查看在线实例
3. 这两句比第一种更方便点，效果和第一个一样 // 固定高的情况下使用这种方法
text-align: center;
line-height: 100px;
实例
<style type="text/css">
div{
width:600px;
height: 100px;
background-color: #444444;
color:#fff;
text-align: center;
line-height: 100px;
/*文本上下左右居中*/
}
</style>
<div>
131321
</div>运行实例 »
点击 "运行实例" 按钮查看在线实例
4.这一种就比较抽象了。利用的是position定位，
relative 相对定位 相对与当前文档流
实例
<style type="text/css">
div{
width:600px;
height: 100px;
background-color: #444444;
}
p{
width: 50px;
height: 50px;
position: relative;
top:50%;
left: 50%;
margin-top:-25px;
margin-left:-25px;
color: #fff;
}
</style>
<div>
<p>123</p>
</div>运行实例 »
点击 "运行实例" 按钮查看在线实例
absolute 绝对定位 当没有父元素relative时 相对与整个HTML定位
fixed 固定定位
这两个大家就自己试试，毕竟纸上得来终觉浅
插播一列 常用的居中方法
看代码
实例
<style type="text/css">
div{
min-width:300px;
height: 100px;
background-color: #444444;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
</style>
<div>
</div>运行实例 »
点击 "运行实例" 按钮查看在线实例
