Demo

html

 <div class="father">
        <ul class="center">
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
        </ul>
    </div>

css

.father {
    background-color: green;
}

.center {
    background-color: orange;
}

效果：

image.png

实现

1.宽度已知，使用margin

.center {
    background-color: orange;
    width: 100px;
    margin: 0 auto;
}

效果：

image.png

适用：
只能进行水平居中，对浮动元素或绝对定位元素无效

2.宽度已知,使用绝对定位

.father {
    background-color: green;
    text-align: center;
    position: relative;
}

.center {
    background-color: orange;
    position: absolute;
    width: 200px;
    left: 50%;
    margin-left: -100px;
}

效果

image.png

原理:
把这个绝对定位的元素的left或top设置为50%，这时候并不是居中的，而是把这个元素向右移动父元素一半的距离，再使用一个负的margin-left或者margin-top的值把它拉回到居中位置，这个值取该元素宽度或高度的一半。
优点：
兼容IE6-7
缺点：
不能使用百分比大小，内容高度不可变；内容可能会超过容器；

3.宽度已知，使用绝对定位来实现完全居中

.father {
    background-color: green;
    position: relative;
    width: 300px;
    height: 300px;
}

.center {
    background-color: orange;
    position: absolute;
    width: 200px;
    height: 200px;
    margin: auto;
    /*这句必不可少*/
    left: 0;
    /*left与right必须成对出现来控制水平方向*/
    right: 0;
    bottom: 0;
    /*top与bottom必须成对出现来控制水平方向*/
    top: 0;
}

效果

image.png

4.宽度已知，使用绝对定位+transform

.father {
    background-color: green;
    position: relative;
    width: 400px;
    height: 400px;
}

.center {
    background-color: orange;
    list-style-type: none;
    padding: 0;
    position: absolute;
    width: 50%;
    height: 50%;
    margin: auto;
    top: 50%;
    left: 50%;
    /* 元素从当前位置，向左向下移动 */
    transform: translate(-50%, -50%);
}

效果：

image.png

优点：
内容高度可变，可以使用百分比
缺点：
不兼容IE8;会与其他transform样式冲突。

5.宽度不定，使用text-align:center+display:inline-block

.father {
    background-color: green;
    text-align: center;
}

.center {
    background-color: orange;
    display: inline-block;
}

效果

image.png

适用：
只能对图片、按钮、文字等行内元素（display为inline或inline-block等）进行水平居中。在IE6、7这两个浏览器中，它是能对任何元素进行水平居中的。

6.宽度不定，使用弹性盒子的justify-content属性

.father {
    background-color: green;
    text-align: center;
    display: flex;
    justify-content: center;
}

.center {
    background-color: orange;
}

效果

image.png

7.使用display:table-cell

.father {
    background-color: green;
    display: table-cell;
    width: 400px;
    height: 400px;
    vertical-align: middle;
}

.center {
    background-color: orange;
    list-style-type: none;
    width: 50%;
    padding: 0;
    margin: 0 auto;
}

效果：

image.png

原理：
对于那些不是表格的元素，我们可以通过display:table-cell 来把它模拟成一个表格单元格，这样就可以利用表格那很方便的居中特性了。
优点：浏览器兼容性好