元素水平,垂直居中的几种方式

2022-07-11

字数统计: 541字 | 阅读时长: 2分

阅读量

1.—元素绝对定位,外边距自适应
html

<div class="father">
  <div class="son">
    元素绝对定位,外边距自适应
  </div>
</div>

css

.father {
  width: 500px;
  height: 200px;
  position: relative;
  border: 1px solid red;
}
.son{
  width: 200px;
  height: 100px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  border: 1px solid green;

}

2.—元素绝对定位,外边距取负值
html

<div class="father">
  <div class="son">
    元素绝对定位,外边距取负值
  </div>
</div>

css

.father {
  width: 500px;
  height: 200px;
  position: relative;
  border: 1px solid red;
}
.son{
  width: 200px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -50px;
  border: 1px solid green;

}

这里有个问题,为什么采取margin-left，margin-top,
待解决：margin-right,margin-bottom,自己试了下，没有效果.

3.—元素绝对定位,平移自身

html

<div class="father">
  <div class="son">
    元素绝对定位,外边距取负值
  </div>
</div>

css

.father {
  width: 500px;
  height: 200px;
  position: relative;
  border: 1px solid red;
}
.son{
  width: 200px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  border: 1px solid green;

}

4.—table布局
display:table：此元素会作为一个表格单元格显示（类似 td 和 th）

html

<div class="father">
  <div class="son">
    元素绝对定位,外边距取负值
  </div>
</div>

css

.father {
  width: 500px;
  height: 200px;
  display: table-cell;
  border: 1px solid red;
  text-align: center;
  vertical-align: middle;
}
.son{
  width: 200px;
  height: 100px;
  display: inline-block;
  border: 1px solid green;

}

5.—flex布局

html

<div class="father">
  <div class="son">
    元素绝对定位,外边距取负值
  </div>
</div>

css

.father {
  width: 500px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.son{
  width: 200px;
  height: 100px;
  border: 1px solid green;

}

6.—grid布局

html

<div class="father">
  <div class="son">
    元素绝对定位,外边距取负值
  </div>
</div>

css

.father {
  width: 500px;
  height: 200px;
  display: grid;
  justify-content: center;
  align-items: center;
}
.son{
  width: 200px;
  height: 100px;
  border: 1px solid green;

}

小结

行内元素：

水平居中：text-align:center
垂直居中: 设置height=line-height

块级元素

无脑flex布局