如何将div块固定在屏幕中央:两种简单方法
要将一个div块保持在屏幕正中,可以使用以下两种方法:
- 使用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>
- 使用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 著作权归作者所有。请勿转载和采集!