html - 如何使用 'text-align:centre' 水平集中页面上的元素？

Question

我最近开始学习 HTML 和 CSS，并且刚刚开始创建一个简单的网站，只是为了试验这门语言。在我的主页上，我有一个 div，它将包含导航栏和我的标题。导航栏应位于 div 的右上角，然后标题应直接位于 div 的中心。

但是每当我尝试使用 text-align:centre 时，它永远不会把它放在中心。这是我到目前为止所拥有的，https://jsfiddle.net/3qqjfy24/1/ .请有人告诉我如何让“Harry Brown”标题直接位于 div 的中心(水平和垂直)。

<div id="nav">
    <ul id="bar">
        <li>Home</li>
        <li>About</li>
        <li>Projects</li>
        <li>Contact</li>
    </ul>
    <h1>Harry Brown</h1>
</div>

这是 CSS:

#nav {
background-color: orange;
width: 100%;
height: 250px;
}
#bar {
    float: right;
    padding-right: 10px;
}

#bar li {
    display: inline-block;
    margin-right: 5px;
    border-color: white;
    border-style: solid;
    border-width: 2px;
    padding: 5px 5px 5px 5px;
    color: white;
    text-transform: uppercase;
    font-family: Tahoma, 'Geneva', sans-serif;
}

#nav h1 {
    color: black;
    position: absolute;
    text-transform: uppercase;
    font-family: Tahoma, 'Geneva', sans-serif;
}

Answer 1

试试这个:

#nav h1 {
    color: black;
    text-transform: uppercase;
    font-family: Tahoma, 'Geneva', sans-serif;
    text-align:center;
}