参考资料
CSS实现元素的水平居中
行内元素
1.为行内元素（文本、图片等）设置水平居中
原理
对行内元素的父级元素设置： text-align: center;
案例
html
<div class="panel">
<h1>为行内元素设置水平居中</h1>
<p class="v-in"><span>将文本设置为水平居中</span></p>
</div>
css
*{padding:0;margin:0;}
.panel{width:100%;height:300px;background-color:#a0a0a0;}
.v-in{width:100%;height:45px;line-height:45px;background:#000;color:#fff;font-size:14px;font-family:"Microsoft YaHei";text-align:center;}
结果
行内元素的水平居中
块级元素
1.定宽块级元素的水平居中
原理
元素需要设置一定的宽度，然后在通过设置：margin: 0 auto;实现；
案例
html
<div class="panel1">
<h1>定宽块级元素的居中</h1>
</div>
css
.panel1{width:100%;height:60px;background-color:cadetblue;color:#ffff;margin-top:30px;}
.panel1h1{width:800px;height:60px;line-height:60px;backgroundcolor:coral;color:#fff;text-align:center;margin:0 auto;}
结果
定宽元素的水平居
2.不定宽块级元素的水平居中
原理1--加入table标签
利用利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
实现：
给需要设置居中的元素外面加入一个table标签（包含tbody,tr,td）,然后给table设置margin: 0 auto;
案例1
html
<div class="panel2">
<h1>不定宽块级元素的居中--加入table</h1>
<table>
<tr>
<td>
<ul>
<li>< a href="javascript:;">item1</a></li>
<li><a href="javascript:;">item2</a></li>
<li><a href="javascript；；">item3</a></li>
</ul>
</td>
</tr>
</table>
</div>
css
.panel2{width:50%;height:200px;background-color:coral;margin:30px 0;}
.panel2table{margin:0 auto;}
a{text-decoration:none;}
.panel2 ul li{list-style:none;}
结果
不定宽元素的居中
原理2--display:inline/inline-block;
将块级元素改变为行内元素，然后对其父级元素设置：text-align: center;
案例2
html
<div class="panel3">
<ul>
<li><a href="javascript:;">item</a></li>
<li><a href="javascript:;">item</a></li>
</ul>
</div>
css
.panel3{width:100%;height:100px;background-color:darkseagreen;textalign:center;}
.panel3ul{display:inline-block;}
.panel3ul li{list-style:none;display:inline-block;}
结果
不定宽元素的居中
原理3--浮动+相对定位
通过给父元素设置float，然后给父元素设置position:relative和left:50%，子元素设置position:relative和left:-50%来实现水平居中
案例3
html
<div class="panel4"><ul><li>1</li><li>2</li><li>3</li></ul></div>
css
.panel4{float:left;position:relative;left:50%;}
.panel4 ul{margin-top:100px;float:left;position:relative;left:-50%;}
.panel4 ul li{display:inline-block;margin-right:10px;list-style:none;width:20px;height:20px;line-height:20px;text-align:center;border-radius:100%;background-color:lightblue;color:#333;}
结果
不定宽元素的居中
CSS实现元素的垂直居中
1.父元素高度固定的的单行文本
原理
给父级元素设置固定的高度，然后设置：line-height的值与高度一致；
弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。
案例
html
<div class="panel5">
<span>父元素高度固定的单行文本</span>
</div>
css
.panel5 {
width:300px;
height:200px;
line-height:200px;
text-align:center;
color:#fff;
background-color:cornflowerblue;
clear:both;
}
结果
父级定宽的单行文本垂直居中
2.父元素高度固定的多行文本--方法1
原理：
使用插入table(包括tbody、tr、td)标签，同时设置vertical-align：middle（td标签默认情况下就默认设置了vertical-align为middle，可省略）;
案例
html
<table>
<tbody>
<tr>
<td class="pra">
<p>父元素固定的个多行文本设置垂直居中</p>
<p>父元素固定的个多行文本设置垂直居中</p>
<p>父元素固定的个多行文本设置垂直居中</p>
<p>父元素固定的个多行文本设置垂直居中</p>
</td>
</tr>
</tbody>
</table>
css
*{
padding: 0;
margin: 0;
}
.par {
width: 100%;
height: 400px;
background: #ccc;
}
效果
父元素高度固定的多行文本垂直居中
3.父元素固定的多行文本垂直居中方法2--display: table-cell;(设置为表格单元显示)
原理
在chrome、firefox及IE8以上的浏览器下可以设置块级元素的display为table-cell（设置为表格单元显示），激活vertical-align属性，但注意IE6、7并不支持这个样式,兼容性比较差。
案例
html
<div class="container">
<p>父元素垂直高度固定的垂直居中</p>
<p>父元素垂直高度固定的垂直居中</p>
<p>父元素垂直高度固定的垂直居中</p>
</div>
css
.container {
display: table-cell;
width: 300px;
height: 400px;
background: #aa00dd;
vertical-align: middle;
text-align: center;
}
结果
父元素宽度固定的多行文本的垂直居中
网友评论