Question

如果您使用下面的代码并创建它的html页面，您将看到蓝色标题div左对齐。尽管标题元素具有固定的宽度，左/右边距设置为自动。

我能使表正确居中的唯一方法是删除display：table-cell属性。

我需要它中心对齐（水平）并且还需要子元素垂直居中（通过vertical-align和display指令）。

如何使div居中对齐并垂直对齐？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<style type="text/css">
body {margin:0; padding:0; text-align:center;}
.wrapper {padding-top:59px; text-align:left;}
.header {height:138px;width:917px; background:blue;margin:0 auto; text-align:center; vertical-align: middle; display:table-cell; }
</style>
</head>
<body>
<div class="wrapper">
    <div class="header">
        <div class="siteTitle"><a href="#">Site Title Here</a></div>
        <div class="tagline">Tagline goes here</div>
    </div>
</div>
</body>

Answer 1

我将您的样式更改为使用许多技术之一进行垂直和水平居中。我更喜欢这个，因为它对我来说最有意义。没有任何时髦的黑客涉及并跨多个浏览器工作。

.wrapper
{
    position: absolute;
    top: 50%;
    margin-top: -69px; /* half main elements height*/
    left: 0;
    width: 100%;
}

.header
{
    width: 917px;
    height: 138px;
    margin: 0 auto;
    background-color: #cccccc;
    overflow: auto; /* allow content to scroll inside element */
    text-align: center;
}

Answer 2

放弃display:table-cell;

只需根据需要在顶部添加填充，然后从高度中减去该值。如下所示：

.header {
    height:88px;
    padding:50px 0 0 0;
    width:917px;
    background:blue;
    margin:0 auto;
    text-align:center;
}

您必须根据自己的喜好调整填充/高度比。

显示：table-cell foobars中心定位div？

2 个答案: