网页元素水平居中的几种解决方案

Question

一般我们的网页元素都是居中的，这对于大屏幕的设备来说也是最合适的布局方式，而小屏幕的设备我们一般都是全屏展示、响应式布局，那么问题来了，我们改如何有效的设置元素水平居中，达到兼容所有显示屏幕设备。

块元素外边距Auto自动居中

我们把元素的左右的外边距Margin设置为Auto的时候，元素就会自动居中，但是这个属性只针对于块元素，对内联元素没有什么效果，网页的常规布局也基本都是这么设置，而且兼容性非常好，几乎所有的浏览器都支持。

在实际使用中，我们可以为这些需要居中的元素创建一个起容器作用的Class类。需要特别注意的一点就是，必须为该容器指定宽度。

#container {
    margin-left: auto;
    margin-right: auto;
    width: 980px;
}

在大多数主流浏览器中，这种方法都非常有效，即使是Windows平台上的IE6，在其标准或者兼容模式（compliance mode）下，也能够正常显示。如果低于IE6的浏览器就无效了，但是现在谁还是用IE6一下的浏览器。

注意：如果我们的内容比显示屏幕宽，那么这个方法也就失效了。

尽管在支持上不尽如人意，但大多数设计师，都建议尽可能地使用这种方法。该方法也被认为，在各种用CSS实现元素水平居中方法中，最正确、最合理、最简单的一种方式。

内联元素Text-align文本居中

Text-align这个属性比较神奇，别看他的字面意思是文本居中，但是对几乎所有的内联元素都能生效，而且对块元素的display:inline、display:inline-block也同样能够生效，这个属性设置在父元素，对子元素的居中属性，它能兼容大多数浏览器，所以在某些情况下也自然必不可少。

<ul class="flink">
<li><a href="https://www.wenjiangs.com/donation">捐赠本站</a></li>
<li><a href="https://www.wenjiangs.com/friendship">友情链接</a></li>
<li><a href="https://www.wenjiangs.com/specification">使用规范</a></li>
<li><a href="https://www.wenjiangs.com/agreement">用户协议</a></li>
<li><a href="https://www.wenjiangs.com/website">前端开发导航</a></li>
<li><a href="https://www.wenjiangs.com/about">关于我</a></li>
</ul>

.flink{ text-align:center; margin:0; padding:15px 0;}
.flink li{ display:inline-block; padding:0 10px;}

其实上面的列表完全可以不用使用列表，直接使用一个DIV然后里面添加A标签，给DIV设置文本居中即可，代码量更加少，而且更合理，不过有些时候我们不得不使用UL列表，可以考虑上面的方式。

Margin负边距+Position绝对定位

上面两种居中的方法都有弊端，第一个当元素大于屏幕的宽度的时候，居中就会失效，而且还会出现滚动条，因为我们必须设置宽度，第二种由于是内联元素，当父级元素的宽度大于屏幕宽度时候，我们的子元素就会自动换行，这似乎也是可以理解的。

有一种方法，不管元素的宽度和屏幕的宽度如何变化，元素始终都在页面的正中央，但是可能小屏幕的时候，内容会被遮挡，做大屏幕兼容的时候可以试试这种方法。

负外边距解决方案，远不是仅仅为元素添加负外边距这么简单。这种方法需要同时使用绝对定位和负外边距两种技巧，而且代码量比较大，不过兼容比较好。

下面是该方案的具体实现方法。首先创建一个包含需要居中元素的容器，设置一个高度，因为使用到了绝对定位，没有高度将无法显示出来。

<div style="height:500px;">
</div>

然后在里面添加一个DIV容器，将其绝对定位于相对页面左边边缘50%的位置。这样该容器的左外边距将从页面50%宽度的位置开始算起。

最后再添加一个DIV内容容器，将这个容器的左外边距值设置为负的容器宽度的一半。这样即可将该容器固定在页面水平方向的中点，完整的代码如下。

<div style="height:500px;">
    <div class="wrap">
        <div class="wrap2">
            <a href="#" target="_blank">
                <img src="#" border="0" alt="全屏海报" />
            </a>
        </div>
    </div>
</div>

.wrap{ left:50%; top:auto;}
.wrap2{ left:-960px; top:auto;}
.wrap2 a{ width:1920px; height:500px; display:block;}

虽然这并不是首选的解决方案，但也是个不错的方法，且适用性极广，能够在几乎所有的浏览器上面兼容效果，并且目前淘宝和京东的大屏幻灯片展示布局也是采用的这个方法，还能兼容内容比屏幕宽的情况。

所以若想得到最广泛的浏览器支持，那么这种方法将会是最好的选择。