前端面试~2020~垂直水平居中布局~多种方法

最新推荐文章于 2022-08-03 11:30:19 发布

好帅的爸爸（）

最新推荐文章于 2022-08-03 11:30:19 发布

阅读量205

点赞数 3

分类专栏： CSS 布局文章标签： css css3 html

本文链接：https://blog.csdn.net/wangliuqi123/article/details/109179653

版权

CSS 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

布局

2 篇文章 0 订阅

订阅专栏

HTML代码：

<div class="box1">
  <div class="box2">
    
  </div>
</div>

方法一 Flex布局

.box1{
  background-color:red;
  width:200px;
  height:200px;
  display:flex;
  flex-direction: row;
  justify-content:center;
  align-items:center;
}
.box2{
  background-color:green;
  width:100px;
  height:100px;
  
}

方法二绝对定位 (使用于知道子DOM的长宽)

.box1{
  background-color:red;
  width:200px;
  height:200px;
  position:relative;
}
.box2{
  background-color:green;
  width:100px;
  height:100px;
  position:absolute;
  margin-top:50%;
  margin-left:50%;
  left:-50px;
  top:-50px;
}

方法三绝对定位（不必知道子DOM长宽）

.box1{
  background-color:red;
  width:200px;
  height:200px;
  position:relative;
}
.box2{
  background-color:green;
  width:100px;
  height:100px;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%)
}

方法四绝对定位

.box1{
  background-color:red;
  width:200px;
  height:200px;
  position:relative;
}
.box2{
  background-color:green;
  width:100px;
  height:100px;
  position:absolute;
  margin:auto;
  left:0;
  top:0;
  right:0;
  bottom:0;
}