网站鼠标经过图片代码,网站死循环,江北区网站建设,自适应响应式网站源码目录 1采用flex弹性布局#xff1a;
2子绝父相margin#xff1a;负值#xff1a;
3.子绝父相margin:auto#xff1a;
4子绝父相transform#xff1a;
5通过伪元素
6table布局
7grid弹性布局 文字 水平垂直居中链接#xff1a;文字水平垂直居中-CSDN博客
以下为盒子…目录 1采用flex弹性布局
2子绝父相margin负值
3.子绝父相margin:auto
4子绝父相transform
5通过伪元素
6table布局
7grid弹性布局 文字 水平垂直居中链接文字水平垂直居中-CSDN博客
以下为盒子水平垂直居中
templatedivdiv classfatherdiv classson/div/div/div
/template1采用flex弹性布局
在父元素设置display: flex表示该容器内部的元素将按照flex进行布局再设置align-items: center表示这些元素将相对于本容器水平居中justify-content: center实现垂直居中。
.father{width: 400px;height: 300px;background-color: rebeccapurple;display: flex;justify-content: center;align-items: center;
}
.son{width: 200px;height: 100px;background-color: aqua;
}效果 2子绝父相margin负值
设置left和top为50%此时位置会偏右自身元素的宽高再设margin-left和margin-top为自身元素宽高的负一半实现水平垂直居中。 .father {width: 400px;height: 300px;background-color: rebeccapurple;position: relative;
}
.son {width: 200px;height: 100px;background-color: palegoldenrod;position: absolute;top: 50%;left: 50%;//宽度的一半margin-left: -100px;//高度的一半margin-top: -50px;
}
效果 3.子绝父相margin:auto 设置top、left、right、bottom为0,在设置margin:auto .father{width:400px;height:300px;background-color: rebeccapurple;position: relative; //父级设置为相对定位}.son{width:100px;height:40px;background: red;position: absolute; //设置为子级绝对定位top:0;left:0;right:0;bottom:0;margin:auto;}效果 4子绝父相transform 设置left和top为50%此时位置会偏右自身元素的宽高再设transform: translateX(-50px) translateY(-50px); .father{width: 400px;height: 300px;background-color: rebeccapurple;position: relative;
}
.son{width: 200px;height: 100px;background-color: skyblue;position: absolute;left: 50%;top: 50%;transform: translateX(-100px) translateY(-50px);
}效果 5通过伪元素 .father{width: 400px;height: 300px;background-color: rebeccapurple;text-align: center;
}
.father::before{content : ;display: inline-block;vertical-align: middle;height: 100%;
}
.son{width: 200px;height: 100px;background-color: pink;vertical-align: middle;margin: 0 auto;display: inline-block;
}效果 6table布局 设置父元素为display:table-cell子元素设置 display: inline-block。利用vertical和text-align可以让所有的行内块级元素水平垂直居中。 .father {display: table-cell;width: 400px;height: 300px;background: rebeccapurple;vertical-align: middle;text-align: center;
}
.son {display: inline-block;width: 200px;height: 100px;background: forestgreen;
}效果 7grid弹性布局 在父元素设置display: drid表示该容器内部的元素将按照flex进行布局再设置align-items: center表示这些元素将相对于本容器水平居中justify-content: center实现垂直居中。 .father{width: 400px;height: 300px;background-color: rebeccapurple;display: grid;justify-content: center;align-items: center;
}
.son{width: 200px;height: 100px;background-color: greenyellow;
}效果
