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

2022-04-12394次阅读flexboxGrid

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;
}

 

上一篇: charCodeAt()函数可返回字符的Unicode编码  下一篇: clip-path区域裁剪学习  

Grid布局Flex布局水平和垂直居中相关文章