<div class="text-center">水平居中</div>        .text-center {width: 200px;height: 100px;text-align: center;  /* 让文本水平居中 */color: #fff;background-color: #f54;
}

<div class="img-center"><img src="fenjing.jpg" alt="蓝天白云青山绿水">
</div>    .img-center {width: 200px;height: 120px;text-align: center; /* 让图片水平居中 */background-color: #f54;
}

<div class="parent-box"><div class="child-box">块级元素水平居中</div>
</div> .parent-box {width: 250px;height: 150px;background-color: #f98;
}
.child-box {width: 200px;height: 100px;background-color: #f00;margin-left: auto;margin-right: auto;
}

<div class="text-middle">单行文本竖直居中</div>.text-middle {width: 200px;height: 100px;line-height: 100px;background-color: #f00;color: #fff;
}

<div class="text-middle-padding">不确定高度的一段文本竖直居中</div> .text-middle-padding {width: 150px;padding-top: 30px;padding-bottom: 30px;color: #fff;background-color: #f00;
}

<div class="parent-box"><div class="child-box">确定高度的块级元素竖直居中</div>
</div> .parent-box {position: relative;width: 250px;height: 150px;background-color: #f00;
}
.child-box {position: absolute;top: 50%;width: 200px;height: 100px;margin-top: -50px;background-color: #f54;
}

<div class="parent-box"><div class="child-box">绝对定位实现水平垂直居中居中</div>
</div> .parent-box {position: relative;width: 250px;height: 150px;background-color: #f00;
}
.child-box {position: absolute;top: 0;right: 0;bottom: 0;left: 0;width: 200px;height: 100px;margin: auto;background-color: #f54;
}

<div class="parent-box"><div class="child-box">平移实现水平垂直居中法</div>
</div> .parent-box {width: 200px;height: 200px;background-color: #f00;
}
.child-box {position: relative;top: 50%;left: 50%;width: 150px;height: 150px;background-color: #f54;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);
}

<div class="parent-box"><div class="child-box">让浏览器计算子元素的宽高并让其水平垂直居中</div>
</div> .parent-box {position: relative;width: 200px;height: 200px;background-color: #f00;
}
.child-box {position: absolute;top: 20%;right: 20%;bottom: 20%;left: 20%;background-color: #f54;
}

<div class="parent-box"><div class="child-box">我是子元素，这里使用了 css3 的弹性伸缩布局</div>
</div>.parent-box {width: 400px;height: 150px;display: flex;justify-content: center; /* 让子元素水平居中 */align-items: center; /* 让子元素垂直居中 */border: 1px solid #999;
}
.child-box {background-color: #fe5454;color: #fff;
}

<ul class="pagination"><li><a href="#">&laquo;</a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">&raquo;</a></li>
</ul>      

<ul class="pagination"><li><a href="#">&laquo;</a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">&raquo;</a></li>
</ul>

ul.pagination {margin-top: 20px;text-align: center;font-size: 0; /* 设置 font-size 的大小为 0，目的是让显示方式为 inline-block 的子元素去除外边距(外边距是由于 html 的空格所导致的) */
}
ul.pagination li { display: inline-block; }
ul.pagination li a {display: inline-block;padding: 7px 14px;border-width: 1px 0 1px 1px;border-style: solid;border-color: #f1f2f3;font-size: 15px;  /* 这里一定要设置 font-size，别指望去继承了，因为如果不设置，将会继承 ul 的大小 0 */transition: all .3s ease 0;
}
ul.pagination li:first-child a {border-top-left-radius: 5px;border-bottom-left-radius: 5px;
}
ul.pagination li:last-child a {border-right: 1px solid #f1f2f3;border-top-right-radius: 5px;border-bottom-right-radius: 5px;
}
ul.pagination li a:hover {background-color: #fe5454;color: #fff;border-color: #fe5454;
}