css居中控制 水平居中 垂直居中

ul li横排

ul{list-style:none;margin:0;padding:0}
li{float:left;display:inline;margin-right:8px}

<style>
.container{
    text-align:center;
}
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
}
.container li{
    margin-right:8px;
    display:inline;
}
</style>

<style>
.container{
    float:left;
    position:relative;
    left:50%
}

.container ul{
    list-style:none;
    margin:0;
    padding:0;

    position:relative;
    left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>

水平居中
1.如果被设置的元素是行内元素（text img），给父元素设置text-align：center即可达到水平居中
2.如果被设置的元素是块状元素。用上述方法就不起作用了。这时分两种情况：定宽块状和不定宽块状。
如果被设置的元素是定宽块状的，那么设置“左右margin：auto”即可达到水平居中。
如果是不定宽的有三种方法。
第一种：给被设置元素加table标签
第一步：在被设置元素的外面加上<table><tbody><tr><td></td></tr></tbody></table>
第二步：为这个table设置“左右margin：auto”。
第二种：设置display：inline方法
改变块级元素的display为inline，然后使用text-align：center来实现居中效果。
这种方法相比第一种方法的优势是不用增加无语义标签，简化了标签的嵌套深度，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。
第三种：设置position：relative和left：50%
通过给父元素设置float，然后给父元素设置position：relative和left：50%，子元素设置position：relative和left：-50%来实现水平居中。
这种方法可以保留块状元素仍以 display:block 的形式显示，优点不添加无语议表标签，不增加嵌套深度，但它的缺点是设置了 position:relative，带来了一定的副作用。
这三种方法使用得都非常广泛，各有优缺点，具体选用哪种方法，可以视具体情况而定。

垂直居中
1.父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的height和line-height高度一致来实现的。
2.父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种：
方法一：使用插入table（同上）标签，同时设置vertical-align：middle。（vertical-align样式只有在父元素为td或th时才会生效。 td 标签默认情况下就默认设置了 vertical-align 为 middle）
方法二：在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。

隐性改变display类型：
当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
position : absolute
float : left 或 float:right
元素会自动变为以 display:inline-block 的方式显示，当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。