将内容集中在容器内

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 link更正的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;*/
}