0
点赞
收藏
分享

微信扫一扫

css设置div上下左右均居中?

覃榜言 2022-01-26 阅读 122
csscss3html

css设置div或盒子居中,垂直居中,左右居中

类型一:固定宽度高度

  1. html代码
 <div class="login_container">
    <div class="login_box">
      <div>内容</div>
    </div>
  </div>

2 css

// 外部一级div
.login_container {
  background-color: darkgrey;
  height: 100%;
}
// 二级div
.login_box {
  height: 300px;
  width: 450px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute; // 绝对定位
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); // 横轴-50%,竖轴-50%
}

效果图:
在这里插入图片描述

类型二:宽度高度不固定值

  1. html代码
 <div class="login_container">
    <div class="login_box">
      <div>内容</div>
    </div>
  </div>

2 css

// 外部一级div
.login_container {
  background-color: darkgrey;
  height: 100%;
}
// 二级div
.login_box {
  height: 300px;
  width: 450px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute; // 绝对定位
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); // 横轴-50%,竖轴-50%
}

效果图:

举报

相关推荐

0 条评论