要将一个div块保持在屏幕正中,可以使用以下两种方法:

  1. 使用CSS的flexbox布局。将父元素的display属性设置为flex,然后使用justify-content和align-items属性将子元素居中。
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

然后将要居中的div块放置在容器中:

<div class='container'>
  <div class='centered-div'>内容</div>
</div>
  1. 使用position属性为absolute和transform属性为translate来定位div块。首先,将div的position属性设置为absolute,并将left和top属性设置为50%。然后,使用transform属性的translate方法将div块的位置向左上角移动自身宽度和高度的一半。
.centered-div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
<div class='centered-div'>内容</div>

这样,div块将会保持在屏幕正中。


原文地址: https://www.cveoy.top/t/topic/pF1c 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录