CSS实现元素居中的各种方法

水平居中，text-align:center; 和 margin:0 auto; 。

这两种方法都是用来水平居中的，前者是针对父元素进行设置而后者则是对子元素。他们起作用的首要条件是子元素必须没有被 float 影响，否则一切都是无用功。margin:0 auto也可以被写成 margin:0 auto 0 auto。不能理解的童鞋们可以自己去找找关于 CSS 缩写的内容。

垂直居中，通过设置 line-height 和父元素高度一致。

<style>
line-height: 20px;
</style>

使用 position 实现水平和垂直居中。

这个方法可以说真的是万能的。当你为一个元素无法居中而困扰的时候，可以果断的使用他，而且几乎没有后遗症，绝对是前端工程师们居家旅行必备的手段之一。

具体的做法很简单，首先给父元素写上 positon:relative，这么做是为了给子元素打上 position:absolute 的时候不会被定位到外太空去。接下去，写上子元素的 height 和 width，这个似乎是必须的，某些浏览器在解析的时候如果没有这两个值的话会出现意想不到的错位。接着就是整个方法的核心，给子元素再打上 top:50%; left:50% 以及 margin-top: 一半的 height 值的的负数; margin-left: 一半的 width 值的负数。整理一下之后，可能你会给你的子元素写上这样的 css（当然，父元素也要先写上 width 和 height）。

<style>
#dbsqpCenter{
    width: 100px;
    height: 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -40px;
}
</style>

接下去就刷新页面吧，你的子元素已经是居中显示了。使用这个方法的好处在于无论你是什么形式的内容都可以马上居中，而缺点就是必须对元素有确定的宽高值，否则的话可能就需要通过javascript来进行一些小计算了。