如何将元素对齐始终以div为中心而不给其父div赋予宽度？

Question

我正在尝试将div中的元素中心对齐，其中我没有给父div提供任何宽度因为它将根据屏幕大小进行传播，div中总共有3个元素：

1. 按钮
2. 标题
3. 标志

按钮将始终对齐左侧，只要屏幕尺寸发生变化，徽标就会对齐，标题将始终与此对齐

我的代码在这里 http://jsfiddle.net/7AE7J/1/ 请让我知道我哪里出错了什么css我应该申请让元素（标题）始终对齐中心。

HTML

<div  id="header">
     <div id="buttons">
        <a href="#" class="button_back">link 1</a>
        <a href="#" class="button_back">link 2</a>
    </div>
        <h1>Heading of the page</h1>
    <div id="logo">
        <a href="#">
           <img src="http://lorempixum.com/60/60" width="178" height="31" alt="logo" />
       </a>
    </div>
</div>

CSS

#header {
     background:green;
     height:44px;
    width:100% }

 #buttons {
     float: left;
     margin-top: 7px;
     }

 #buttons a {
     display: block;
     font-size: 13px;
     font-weight: bold;
     height: 30px;
     text-decoration: none;
     color:blue;
    float:left}

 #buttons a.button_back {
     margin-left: 8px;
     padding-left:10px;
     padding-top: 8px;
    padding-right:15px }

 #header h1 {
     color: #EEEEEE;
     font-size: 21px;
     padding-top: 9px ;
     margin:0 auto}

 #logo {
     float: right;
    padding-top: 9px;
     }

Answer 1

您可以使用inline-block：

#header {
  text-align: center;
}

#header h1 {
  display: inline-block;
}

Answer 2

这个怎么样：

#header {
    position: relative;
    text-align: center;
}

#header h1 {
    display: inline;
}

#header #buttons {
    position: absolute;
    left: 0;
    top: 0;
}

#header #logo {
    position: absolute;
    right: 0;
    top: 0;
}

display: inline实际上比display: inline-block;

更具跨浏览性

Answer 3

尝试

.centered {
  margin: 0 auto;
}