前端学习——居中

一、水平居中

参考：
- http://www.shejidaren.com/css-center-elements-horizontally.html
- https://www.cnblogs.com/zuochengsi-9/p/5554340.html

1、text-align : center;

仅用于文本居中和内联inline元素，例如span、a、label、em、img等标签。
构建内联元素、或将元素display设置为inline-block，然后设置其父元素为text-align : center即可。

2、margin：0 auto;

定宽的块级元素。
设置需要居中的元素为margin：0 auto;

3、position:relative

.container ul{
    list-style:none; //ul前面的黑点不显示
    float: left;
    position: relative;
    left: 50%;
    padding:0;
}
.container li{
    margin-right: 10px;
    float: left;
    position: relative;
    left:-50%;
}

原理：left位移的百分比是相对于其父元素，ul浮动是相对于div，li则是相对于ul来说。