1. Center a floating element. The parent element and the child element float to the left at the same time. Then the parent element moves 50% to the left, the child element moves 50% to the right, or the child element moves -50% to the left.

<div class="p">
    <div class="c">
        <span>水平居中浮动元素</span>
    </div>
</div>

.p {
    position: relative;
    float: left;
    left: 50%;
}

.c {
    position: relative;
    float: left;
    right: 50%;
}

2. Vertical and Horizontal Center

<div class="center">
    <span>水平垂直居中</span>
</div>

.center {
    position: absolute;
    width: 200px;
    height: 100px;
    left: 50%;
    top: 50%;
    margin-top: -50px;
    margin-left: -100px;
}

3. The picture is horizontally and vertically centered tabel_cell

<div class="test_box">
    <img src="img/head.png" alt="">
</div>

.test_box {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
    border: 1px solid #000;
}

.test_box img {
    margin: auto;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
}

4. The picture is horizontally span vertically centered

<div class="test_box">
    <span class="hook"></span>
    <img src="img/book.jpg" alt="">
</div>

.test_box {
    width: 200px;
    height: 200px;
    text-align: center;
    border: 1px solid #000;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -100px;
}

.test_box .hook {
    display: inline-block;
    height: 100%;
    margin-left: -1px;
    vertical-align: middle;
}

.test_box img {
    vertical-align: middle;
}

5. Center horizontally and vertically (applicable to cases where the parent element has only one child element, such as full screen effect)

<div class="outer">
    <h1 class="inner">适用于父级元素只有一个子元素的情况，比如全屏的效果。</h1>
</div>

.outer {
    position: absolute;
    width: 400px;
    height: 400px;
    background: #f80;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -200px;
}

.inner {
    border: 3px solid green;
    position: absolute;
    margin: auto;
    overflow: hidden;
    width: 50%;
    height: 50%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

6. Center horizontally and vertically (Method 1: Use line-height)

<div class="box">
    <div class="content">水平垂直居中</div>
</div>

.box {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background: #ddf;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
}

.content {
    line-height: 200px;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
}

7. Center horizontally and vertically (Method 2: Use containers as table cells)

<div class="box">
    <div class="content">水平垂直居中</div>
</div>

.box {
    width: 200px;
    height: 200px;
    background: #ddf;
    display: table;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
}

.content {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

8. Horizontal and Vertical Center (Solution under Method 3 and IE6)

<div class="box">
    <div class="content">水平垂直居中</div>
</div>

.box {
    width: 200px;
    height: 200px;
    background: #ddf;
    display: table;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
}

.content {
    _position: relative;
    _top: 50%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.content > div {
    _position: relative;
    _top: -50%;
}

9. Center horizontally and vertically (method 4, use of negative margin)

<div class="box">
    <div class="content">水平垂直居中</div>
</div>

.box {
    width: 200px;
    height: 200px;
    background: #ddf;
    display: table;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
}

.content {
    width: 100px;
    height: 80px;
    padding: 10px;
    background: #abc;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -60px;
    margin-top: -50px;
}

.content > div {
    _position: relative;
    _top: -50%;
}