在 div 中居中 h2 - 非常基础答案

【问题标题】：Center h2 inside a div - very basics在 div 中居中 h2 - 非常基础
【发布时间】：2013-03-13 10:58:31
【问题描述】：

我想将 h2 居中在 #top 内，但 vert-aliignt middle 不能使用相同的自动边距...我不知道该怎么做！

#top {
    display: block;
    position: relative;
    height: 100px;
    background-color: rgba(89,144,222,.6);
}
#top h2{
    text-shadow: 2px 2px black;
    text-align: center;
    color: white;
    font-family:"Impact";
    font-size: 50px;
}

效果是-

【问题讨论】：

标签： html css text margin text-align

【解决方案1】：

在#top 上设置line-height:100px; vertical-align:middle。

【讨论】：

有效。谢谢。在 HTML 中构建结构非常困难......我第一次尝试它
本教程可能会帮助您了解如何定位和构建 HTML：barelyfitz.com/screencast/html-training/css/positioning

【解决方案2】：

您可以将display:table 和display:table-cell 与vertical-aling 属性一起使用。

HTML

<div id="table">
    <div id="top">  
        <h2>Personal webpage</h2>
    </div>
</div>

CSS

#table{
    width:100%;
    display:table;
}

#top {
    display: table-cell;
    position: relative;
    width:100%;
    height: 100px;
    background-color: rgba(89,144,222,.6);
    vertical-align:middle;
}

#top h2{
    text-shadow: 2px 2px black;
    text-align: center;
    color: white;
    font-family:"Impact";
}

JSFiddle.

【讨论】：