text-align: center 只能用于行内元素的水平居中，用在块级元素或容器中是无效的
试试这样：
<div class="metro-layout horizontal" style="margin: 0 auto">
可从两个方面来确保在各种浏览器中全局居中：<style type="text/css">
body{text-align:center}/*针对老式浏览器*/
#wrapper{margin:0 autowidth:1000px}/*要指定宽度*/
</style>
<body>
<div id="wrapper">页面内容</div>
</body>
负外边距(Negative Margins)这或许是当前最流行的使用方法。如果块元素尺寸已知，可以通过以下方式让内容块居中于容器显示：
外边距margin取负数，大小为width/height（不使用box-sizing: border-box时包括padding，）的一半，再加上top: 50%left: 50%。即：
.tocenter{
width: 300px
height: 200px
padding: 20px
position: absolute
top: 50%left: 50%
margin-left: -170px/* (width + padding)/2 */
margin-top: -120px/* (height + padding)/2 */
}
