*** 说明：分两步实现水平垂直居中对齐，第一步，实现水平居中对齐，第二步，实现垂直居中对齐。

一、水平居中对齐：

1】公共样式：

<style>
        .container {
            border: 1px solid #ccc;
            margin: 10px;
            padding: 10px;
        }
        .item {
            background-color: #ccc;
        }
    </style>

2】DOM结构

<body>
    <div class="container container-1">
        <span class="item">
            this is inline-block
        </span>
    </div>
    <div class="container container-2">
        <div class="item">
            this is block item.
        </div>
    </div>
    <div class="container container-3">
        <div class="item">
            this is transform item.
        </div>
    </div>
    <div class="container container-4">
        <div class="item">
            this is absolute item.
        </div>
    </div>
</body>

 

1、行内元素水平居中对齐：

.container-1 {
     text-align: center;
}

 

2、自动填充外边距的方式：

.container-2 .item {
    width: 500px;
    margin: auto;
}

3、定位的方式：

.container-3 {
    height: 300px;
    position: relative;
}
.container-3 .item{
    width: 500px;
    height: 300px;
    position: absolute;
    left: 50%;
    margin-left: -250px;
}

 二、垂直居中对齐：

公共样式：

.container {
   border: 1px solid #ccc;
   margin: 10px;
   padding: 10px;
   height: 200px;
}
.item {
    background-color: #ccc;
}

1、行内元素垂直居中对齐

.container-1 {
    text-align: center;
    height: 200px;
    line-height: 200px;
}

2、定位的方式（需要知道子元素的尺寸）：

.container-2 {
    position: relative;
}
.container-2 .item {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    top: 50%;
    margin-top: -50px;
}

3、transform的方式（不需要知道子元素的尺寸，但是需要注意兼容性）：

.container-3 {
   position: relative;
}
.container-3 .item{
   width: 100px;
   height: 100px;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

4、自动填充外边距的方式（不需要知道子元素的尺寸，不需要考虑兼容性）：

.container-4 {
    position: relative;
}
.container-4 .item{
    width: 300px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}