巧用网格布局令子元素超级居中
本帖最后由 马黑黑 于 2022-7-20 07:43 编辑超级居中是一个临时概念，同等于本文另一个指称，绝对居中。指两个层面：一是上下左右居中，二是父元素伸缩仍然动态保持居中。
网格布局（grid），较之弹性布局（flex）复杂，基本没有给大家介绍。grid布局理念比flex更进一步，但它足够抽象，属性繁多，初学者，乃至中级前端程序员，都不愿意去碰它。不过，正如我们常常使用 flex 的个别简易功能一样，我们也可以这样对待 grid，比如使用它的超级居中功能。
当使用了 display: grid，有一个简单的属性 place-items 能同时设定其下子元素的横向和纵向的对齐设置：
display: grid;
place-items: center;
这将使得此元素下的第一层子元素绝对居中，且动态改变元素大小时，子元素仍然保持绝对居中。
下面是一组完整的实例代码，父元素使用了网格布局，并设置了可以变大变小（拖曳右下角）：
<style>
#papa {
margin: auto;
resize: both;
overflow: auto;
width: 600px;
height: 400px;
box-shadow: 3px 3px 24px #000;
display: grid;
place-items: center;
position: relative;
}
#son {
position: absolute;
width: 300px;
height: 120px;
box-shadow: inherit;
}
</style>
<div id="papa">
<div id="son">Son</div>
</div>
简单解释：
CSS代码中，水鸭色部分是令元素可手动调整窗口尺寸，红色部分即为核心内容，网格布局、居中设置。
效果请看下楼。
<style>
#papa {
margin: auto;
resize: both;
overflow: auto;
width: 600px;
height: 400px;
box-shadow: 3px 3px 24px #000;
display: grid;
place-items: center;
position: relative;
}
#son {
position: absolute;
width: 300px;
height: 120px;
box-shadow: inherit;
}
</style>
<div id="papa">
<div id="son">Son</div>
</div> 果然，无论怎么拉动父元素大小，子元素都是居中的。感谢黑黑的教学，学习了{:4_187:} 中庸之道强制在屏上执行。{:4_189:} 樵歌 发表于 2022-7-20 09:59
中庸之道强制在屏上执行。
又在说文道 红影 发表于 2022-7-20 09:26
果然，无论怎么拉动父元素大小，子元素都是居中的。感谢黑黑的教学，学习了
grid是更高级的布局方式，但它的确是非常非常复杂而繁琐的，我们可以去其琐碎，用其精华 学习学习 马黑黑 发表于 2022-7-20 12:11
又在说文道
俺沒有{:4_174:} 樵歌 发表于 2022-7-20 18:44
俺沒有
文以载道，说说文道挺好 马黑黑 发表于 2022-7-20 12:12
grid是更高级的布局方式，但它的确是非常非常复杂而繁琐的，我们可以去其琐碎，用其精华
嗯，只使用其部分功能，就不会觉得太繁琐了。 红影 发表于 2022-7-20 21:44
嗯，只使用其部分功能，就不会觉得太繁琐了。
对的，就好像这里说的居中，不复杂也不难 马黑黑 发表于 2022-7-20 19:01
文以载道，说说文道挺好
俺可没那分功力{:4_189:} 樵歌 发表于 2022-7-21 06:27
俺可没那分功力
这是你的本能 马黑黑 发表于 2022-7-21 07:16
这是你的本能
俺没啥本事。{:4_173:} 樵歌 发表于 2022-7-21 18:35
俺没啥本事。
本能很多情况下比本事还厉害 马黑黑 发表于 2022-7-20 21:44
对的，就好像这里说的居中，不复杂也不难
看到觉得不难，实际因为记不住，而觉得难{:4_173:} 红影 发表于 2022-7-21 21:14
看到觉得不难，实际因为记不住，而觉得难
这个会英语就好记了，它是语义化的表达，grid就是网格，place-items，放置项目 马黑黑 发表于 2022-7-21 19:24
本能很多情况下比本事还厉害
本能也木纳{:4_173:} 樵歌 发表于 2022-7-22 16:21
本能也木纳
木讷好，谁也欺负不得
页:
[1]