居中对齐的一些总结

一、元素屏幕居中对齐

相信不少人对margin：0 auto并不陌生，可是margin设置只能对齐左右，不能作到屏幕居中对齐。

正确的作法是设一个position：absolute；top：50%；left：50；

然而此时元素只是左上角居中了，设一个margin-left：-100px；margin-top：-100px；（假设元素200*200）就能实现居中对齐了。

二、div内元素居中。

1 <div id=“a”>
2      <p>123</p>
3      <p>123</p>
4 </div>

若是实现居中的话。

正常的显示效果：第二个p被挤到下面去了，

此时正确的作法是：

让p强制变成表格元素，并实现垂直居中。

display：table-cell;

vertical-align：middle;

text-align:center;

效果如图：

三、ul内几个li居中

在作项目的时候，涉及到一行显示几个图标icon，而后icon附近有一些字符，而后对这几个li进行对齐。

方法一：直接对ul设置padding-left值，使其表面上看着像居中。

方法二：对ul设相对定位，而后向左偏移50%，添加向左浮动，而后对li子元素相对定位，向右偏移。通常以上就能够实现了，可是ie7不兼容。由于li已经把盒子结构破坏了，此时在li内部添加一个span  并设置为块元素 就能够将li撑开了。

*{margin:0; padding: 0; list-style: none;}
.box{overflow: hidden; zoom:1;}
li{border:1px red solid; float: left; display: inline;}
ul{position: relative; left: 50%; float: left;}
li{position: relative; right:50%;}
span{display: block; width: 50px; height: 50px;}

方法三：将li元素变为内联块元素，并设置无浮动。设置宽高值。

此时会出现有间隔的现象，解决办法是将ul的font-size设置为0，而后对li单独设置字体大小值。就能够解决。

ul{text-align:center;font-size:0;}
li{display:inline-block;float:none; width:50px;height:50px;border:1px solid red;font-size:12px;}