html - 在容器内居中内容

Question

嗨，我想正确地将我的内容放在容器内，但我不知道该怎么做。我试过了text-align : center。

我怎样才能做到这一点 ？

HTML

<div id="Contacts" data-bind="foreach: viewModel.contacts()">
    <div class="title">
        <div class="container">
            &nbsp; <small> <span class="red"> NEW CONTACT</span> </small>
            <a href="#" data-bind="text: $data.Title()"></a> <br>
            &nbsp; <a href="#" data-bind="text: $data.Title()"></a> <br>
        </div>
    </div>
</div>

CSS

.container {
    width: 940px;
    margin-left: auto;
    margin-right: auto;
    zoom: 1;
}


.title {
    width: 540px;
    height : 30px;
    margin-bottom: 10px;
    background-color: #F9F7F7;
    border: 1px solid #e4e4e4;
    position: absolute;
}

没有居中

我想要的居中版本（近似值）：

Answer 1

添加line-height:30px;到 .title class。

   .container {
        width: 940px;
        margin-left: auto;
        margin-right: auto;
        zoom: 1;
    }


    .title {
        width: 540px;
        height : 30px;
        line-height : 30px;
        margin-bottom: 10px;
        background-color: #F9F7F7;
        border: 1px solid #e4e4e4;
        position: absolute;
    }

jsfiddle：http: //jsfiddle.net//vU73t/

Answer 2

.centerMe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  /* dimensions */
}

Answer 3

这是带有Fiddle 链接的更正 css 和 HTML 。

HTML

<div id="Contacts">
    <div class="container">
        <div class="title">
            <a href="#" data-bind="text: $data.Title()">Demo Text goes here</a> <br>
        </div>
    </div>
</div>

CSS

*{
    padding:0;
    margin:0;
    }

.container {
    width: 940px;
    margin:0 auto;
    zoom: 1;
    background-color:#ffb7b7;
    padding:20px;
    text-align:center;
}


.title {
    width:540px;
    height:30px;
    margin-bottom: 10px;
    background-color: #F9F7F7;
    border: 1px solid #e4e4e4;
    margin:0 auto;
    /*position: absolute;*/
}