grid 网格中的内容水平居中（css）

2024-01-23 08:05:34

Grid:网格布局，它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局

需求：Grid布局后，实现子元素内容的水平居中

思想：将Grid布局后的子元素变为内联元素(inline-block)，实现文本居中

代码演示:

    <div class="content">
        <div style="background-color: red;">1</div>
        <div class="hello">
        <div>Hello,World!</div>
        </div>
    </div>

CSS

.content{
width:100% ;
height: 100%;
display: grid;
grid-template-columns:80%,20%;
}
.hello{
background-color: green;
display: inline-block;
text-align: center;
}