Grid布局Flex布局水平和垂直居中

Grid布局Flex布局水平和垂直居中，先看HTML结构：

<div class="hero">
    <div class="hero-wrapper">
        <h2>CSS is awesome</h2>
        <p>Yes, this is a hero section made for fun.</p>
        <a href="#">See more</a>
    </div>
</div>

Grid布局水平和垂直居中

.hero {
    display: grid;
    place-items: center;
}

place-items是justify-items和align-items的简写属性。

Flex布局水平和垂直居中

.hero{
    width: 300px;
    height: 200px;
    background: #ccc;
    display: flex;
}

.hero-wrapper{
    width: 50px;
    height: 50px;
    background: #000;
    margin: auto;
}