关于怎样通过css的绝对定位和固定定位来实现HTML元素的居中教程

很多人尝试通过CSS将模式框等元素放在页面中心,但如果不成功,请使用JS执行。这个熟练的句子将演示如何在不使用JavaScript的情况下将元素居中。话不多。我马上进入正文。

 

方法比较简单,就是不只是使用一个包装元素,而是使用两个元素。(推荐课程:css视频教程)

HTML:

<div class="popup">
  <div class="wrapper">
       some content
    </div>
</div>

CSS:

.popup{
   position:fixed;
 left:50%;  
}

此CSS将元素左侧居中到窗口的中心,但是我们希望模式框根据元素的中间位置居中。

现在我们来看看技巧性的方法,因为我们对弹出窗口有两个包装器,所以我们可以操纵内部div,并告诉div向左移动-50%的相对值,并且因为它在容器中,div将只向左移动一半的大小。那就是我们如何将模态框集中在一起的方法。

添加CSS

.popup .wrapper{
  position:relative; 
  left:-50%;
}

然后我们的元素就放在了水平中心,就实现了元素的居中。

© 版权声明
THE END
喜欢就支持一下吧
点赞15 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片