在整合scrollbar-width的body中精确地水平居中一个div,可以通过以下步骤实现:
.centered-div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
这些样式将使"centered-div"元素相对于其父元素水平和垂直居中。position: absolute;
将使其相对于最近的具有position: relative;
的父元素定位,如果没有,则相对于文档定位。
left: 50%;
和top: 50%;
将元素的左上角定位在父元素的中心位置。
transform: translate(-50%, -50%);
将元素向左和向上移动自身宽度和高度的50%,从而使其在水平和垂直方向上居中。
body {
overflow-y: scroll;
scrollbar-width: thin; /* 或者使用 auto 或 none */
}
overflow-y: scroll;
将在内容溢出时显示垂直滚动条。
scrollbar-width: thin;
将设置滚动条的宽度为较细的尺寸。你也可以使用auto
或none
来控制滚动条的显示。
通过以上步骤,你可以在整合scrollbar-width的body中精确地水平居中一个div。
领取专属 10元无门槛券
手把手带您无忧上云