不定宽高元素的水平垂直居中

前端开发中水平垂直居中是绕不开的坎,尤其是宽高不定的元素,之前听说过总总办法,由于自己懒,也没一一去试,今天就做一个总结。

PS:纯CSS实现,布局的问题不应试交给JavaScript(除非某些破不得已的情况)。

预期结果

HTML代码

<div class="panel">
  <div class="box"></div>
</div>

Flex 方法

.panel {
  width: 600px;
  height: 400px;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  width: 83%;
  height: 79%;
  background:green;
}

Flex 是最简单的实现方法,由于目前通常是移动开发,这也是我的首选的方法。关于 Flex 布局可以参考:Flex 布局教程

margin: auto 方法

.panel {
  width: 500px;
  height: 400px;
  background: red;
  position: relative;
}
.box {
  width: 76%;
  height: 79%;
  background: green;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

这算是 css 的一个奇技淫巧,非移动端开发下首选。

CSS3 transform

.panel {
  width: 500px;
  height: 400px;
  background: red;
  position: relative;
}
.box {
  width: 79%;
  height: 77%;
  background: green;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

利益于 CSS3 中 transformtranslate 方法,使用百分比的时候基准为自己本身的宽高。在支持 CSS3 的情况下可以放心用。

后续

如有其他方法再补充,以上。

 标签: CSS, CSS3, 前端开发

作者  :  sailor

仅仅看明白了还不够,能把别人给讲明白了才算及格。



最新文章