水平垂直居中

最新推荐文章于 2025-03-10 08:45:00 发布

weixin_34274029

最新推荐文章于 2025-03-10 08:45:00 发布

阅读量63

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5adf2739518825670a0ff144

1.div固定宽高

如果想要写一个居中于整个页面的，比如弹框呀，loading图等

html
<div class="loading></div>"
css
.loading{
      width:100px;
      height: 100px;
      background-color:red;
      position:absolute;
      left:0;
      top:0;
      bottom:0;
      right:0;
      margin:auto;
}
如果是基于某个div中的
html
<div class="wrapper">
    <div class="loading"></div>
</div>
css
在wrapper上增加position:relative;
.wrapper{
  width:200px;
  height: 200px;
  background-color: green;
  position:relative;
}
.circle{
  width:100px;
  height: 100px;
  background-color:red;
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  right:0;
  margin:auto;
}

复制代码

2.外部容器固定宽高

html
<div class="out">
    <div class="inner"></div>
</div> 
css
.out{
    width: 500px;
    height: 500px;
    display:flex;
    justify-content: center;
    align-items: center;
}
.inner{width: 200px;height: 200px;}
复制代码

利用宽高的一半来实现居中

html


 <div class="wrap center">
    <div class="center2"></div>
 </div>
 
复制代码

css

.wrap {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
}
.center2 {
  width: 50px;
  height: 50px;
  background-color: green;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -25px;
  margin-top: -25px; 
  //以上两行也可以改成transform的写法：
  transform: translateX(-50%) translateY(-50%);
}
复制代码