2025年grid 居中（grid居中对齐）

科技前沿 • 2025-05-18 16:08 • 阅读 47

大家好，我是讯享网，很高兴认识大家。

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <p><strong>grid 二维布局 网格布局</strong><br /> .bx {<br /> display:grid}<br /> 可以以px,百分比&#xff0c;fr为单位<br /> repeat() 第一个值是重复多少次&#xff0c;第二个值是要重复的值&#xff0c;用逗号隔开。<br /> 1)重复 grid-template-columns:1fr 2fr 3fr<br /> 2)水平 grid-template-rows: repeat(3,1fr);&#xff08;等同于1fr 1fr 1fr&#xff09;</p>

讯享网

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:¹⁄₄;
水平线第3个 grid-row:¹⁄₃;
}

元素居中的方式
第一种居中方式
.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水平
}

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

2025年grid 居中（grid居中对齐）

相关推荐