Question

好的，所以这很难解释，但基本上我完全定位了标题div，以便它在标题div中居中。

它仍然在某些计算机上处于这个位置。

但是，在其他计算机上，它会在页面中向下跳跃 - 即使具有相同的定位属性。（这是在同一个Web浏览器上测试的。）

我尝试过绝对，相对等定位，但仍然没有运气！

注意：此div包含文字。

CSS：

#header {
    position:relative;
    height:170px;
    background-color: #30A7BF;
    margin:0px auto;
    padding: 1px;
}

#title {
    position: relative;
    top: -20px;
    left: 315px;
}

谢谢！

Answer 1

您好很难理解您的问题，但我可以提供一些建议，让您拥有一个不错的中心vertical和horizontal：

对于水平对齐，如果您希望所有div居中，则可以使用display:inline-block：
```
#header {
 text-align:center;
}
#title {
 display:inline-block;
}
```
对于垂直对齐，使用line-height等于总height
```
#header {
 line-height:170px;
}
```
_{如果您想要其他选项，这仅适用于一行文字}

这里的演示http://jsfiddle.net/8JLzy/7/

修改

要使用多行文本，您可以执行以下操作：首先，您的html在#title内添加包装：

<div id="header"> <div id="title"> <div class="center">Your Title</div> </div> </div>

使用display属性的CSS工作：

#title { display:table; height:100%; margin:auto; /*Make the horizontal*/ } #title .center { display:table-cell; vertical-align:middle;/*Make the Vertical*/ }

新演示 http://jsfiddle.net/8JLzy/16/

Answer 2

使用line-height，而不是position：relative

#header {
    /*position:relative;*/
    height:170px;
    background-color: #30A7BF;
    margin:0px auto;
    padding: 1px;
    font-size:1em;

}

#title {
    line-height:0.5em; /* for example, or instead use padding-top: */
    padding-left: 315px;

}

在不同的计算机上打开时，Div会继续向下移动页面

2 个答案: