grid 居中（grid居中对齐）



grid 二维布局 网格布局
.bx {
display:grid}
可以以px,百分比，fr为单位
repeat() 第一个值是重复多少次，第二个值是要重复的值，用逗号隔开。
1)重复 grid-template-columns:1fr 2fr 3fr
2)水平 grid-template-rows: repeat(3,1fr);（等同于1fr 1fr 1fr）

area区域
3)划分 grid-template-areas 划分区域,grid的子项要用"grid-area"来指定区域
例:grid-template-areas:
"a1 a2 a3 a3 "
“a4 a5 a6 a7”
“a8 a9 a10 a11”
.box div:nth-child(2){
grid-area:a3;
}
grid-template:是1)重复2)水平3)划分的简写形式

当确定了水平、垂直的区域后，可以根据网格线对元素的位置进行调整
grid-template-colums:repeat(3，1fr)
grid-template-rows:repeat(3，1fr)
.box div:nth-child(2){
grid-area:3/3/3/4;
}
元素在网格里面的水平对齐方式
justify-items:start/center/end/stretch

网格之间的间距
简写: gap:10px(行、列间距都为10px)
gap:20px(行间距为10px，列间距为20px)

子项单独的对齐方式
水平:justify-self:{start
center
end
stretch}

垂直:align-self:{start
center
end
stretch}

简写：place-self:start(垂直) center(水平)

加在子项身上的属性
.box div:nth-child(1){
垂直线第4个 grid-colum:1/4;
水平线第3个 grid-row:1/3;
}

元素居中的方式
第一种居中方式
.box1 {
position:relative;
}
.box1 .dv {
position:absolute;
left:50%;
top:50%;
margin-top:-75px;
margin-left:-75px;
}

第二种居中方式
.box1{position:relative;}
.box1 dv {
position:absolute;
left:0
right:0
top:0
bottom:0
margin:auto;
}

第三种居中方式
.box1{
display:flex;
justify-content:center;
align-items:center;
}

第四种居中的方式
.box {
width:600px;
position:relative;
}
.box .dv {
position:absolute;
left:50%;
top:50%;
tarnsform:tarnslate(-50%,-50%)
}

第五种居中方式
.box1{
display:grid;
place-items:center垂直 center水平
}

👴很着急在写总结，女朋友非要给我唱歌，唱了好几首，完事还得鼓掌。每次她的妈妈批评完她教育完她，她气不过，就让我道歉，虽然👴也不知道为啥，或许这就是爱情吧😐

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/rfx/37868.html