fixed absolute 居中定位的两种方法

一、使用transform进行居中

html部分

<div class="contain">
    <div class="center-box"></div>
</div>

上下左右居中

.contain{
  position: relative;
  width: 100%;
  height: 100vh;
}

.center-box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
 background-color: #FF0000;
}

左右居中

.contain{
  position: relative;
  width: 100%;
  height: 100vh;
}

.center-box{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 500px;
  height: 500px;
 background-color: #FF0000;
}

上下居中

.contain{
  position: relative;
  width: 100%;
  height: 100vh;
}

.center-box{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, 50%);
  width: 500px;
  height: 500px;
 background-color: #FF0000;
}

二、使用margin进行居中(利用margin负值进行定位)

上下左右居中

.contain{
  position: relative;
  width: 100%;
  height: 100vh;
}

.center-box{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -250px;
  margin-top: -250px;
 /* 负数为盒子的一半 */
  width: 500px;
  height: 500px;
 background-color: #FF0000;
}

三、fixed用法同上（效果图）

居中.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。