CSS：一种基于包装元素的标题栏及导航栏内容居中显示方案

概要

本文旨以常规HTML元素及CSS样式为基础，通过添加包装元素，以实现网页标题栏及导航栏内容的居中显示。效果如下：

实现代码

实现该效果的源代码如下：
JSX代码：

import React, { Component } from 'react';
import './style.css';

class App extends Component {
    constructor(props) {
        super(props);

    }

    render() {
        return (
            <div>
                <header className="masthread">
                    <div className="wrapper">
                        <h1>My Page content</h1>
                    </div>
                </header>
                <nav role="navigation" className="navbar">
                    <div className="wrapper">
                        <ul className="navlist">
                            <li><a href="/">Home</a></li>
                            <li><a href="/">World</a></li>
                            <li><a href="/">Local</a></li>
                            <li><a href="/">Sport</a></li>
                        </ul>
                    </div>
                </nav>
            </div>
        );
    }
}
export default App

样式代码：

.wrapper {
    width: 95%;
    max-width: 76em;
    margin: 0 auto;
}

.masthread {
    background-color: deepskyblue;
    /* 为使标题栏不至于自动收缩至与内容等高，通过设置padding为其增加高度 */
    padding: 20px;
}

.masthread h1 {
    margin: 0;
}

.navbar {
    overflow: hidden;
    background-color: rgb(216, 172, 29);
    padding: 10px;
}

.navlist {
    height: 20px;
    /* ul元素自带padding和margin默认值，需通过手动设置消除 */
    padding: 0px;
    margin: 0;
}

.navlist li {
    float: left;
    width: 90px;
    list-style: none;
}

实现原理

网页结构
该网页的核心HTML包含两个，包括基于header元素创建的标题栏和基于nav元素创建的导航栏。在nav元素下添加一个无序列表ul，以实现导航栏内容的添加，每个导航按钮对应一个独立列表元素li，在其下加入元素a以实现超链接功能。此外，为实现水平居中效果，在标题栏和导航栏的下分别增加一个包装元素（样式为wrapper）

显示方案
标题栏和导航栏内容居中显示的方案完全一致，方案包括如下两个方面——水平居中和垂直居中。

（一）水平居中显示方案
内容的水平居中通过包装元素wrapper实现，即将要显示的标题（或导航栏）内容包装于wrapper之内，通过wrapper的样式为内容（标题名或导航栏名称）的显示进行限制和约束。
wrapper样式代码为：

.wrapper {
    width: 95%;
    max-width: 76em;
    margin: 0 auto;
}

其约束包含两个方面：
（1）宽度width。通过设置width，使得子内容（标题名h1）的宽度仅占父元素（masthread）宽度的95%，从而达到水平上的收缩；
（2）边距margin。将其设置为margin:0 auto，去掉了内容的上下外边距，同时将父元素的水平剩余空间分别向左右侧平均分配（左右侧边距各占父元素的2.5%），从而使内容达到居中效果

（二）垂直居中显示方案
内容的父元素mashread和navbar，以及包装元素wrapper均未设置高度height，因此其高度会自动向作为内容的子元素h1和navlist收缩，这样便会导致内容与父元素等高，很不美观。为增加父元素高度，同时令内容垂直居中，这里通过设置padding达到目的。（如果使用height，则仅能增加高度，而作为内容的子元素会紧贴上侧，无法达到垂直居中效果）