[ 面试系列 ] - 五:如何垂直居中?

不得不说,不考虑兼容性的情况下,flex 真的非常好用,有兴趣的同学可以看看向军老师的 呀!被闪电击中了,CSS3 FLEX 弹性盒模型让布局飞起来 。(看这标题就知道向军老师是个幽默风趣的人,其内容也是干货满满)

通过 flex 实现垂直居中常用的有两种方案,实现如下:

/* 默认主轴 */
.container {
  display: flex;
  align-items: center;
}

/* 主轴 -> y */
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
复制代码

absolute(绝对定位)

事实上,像是 float,absolute 这类会破坏文档流的危险属性,尽量少用为妙。

通过 absolute 实现垂直居中常用的有四种方案,实现如下:

.futher {
  width: 300px;
  height: 300px;
  position: relative;
}

/* [1]: 最常用,不过兼容性相对较差 */
.child {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

/* [2]: 需要知道子元素的高 */
.child {
  height: 100px;
  position: absolute;
  top: 50%;
  margin: -50px 0 0 0;
}

/* [3]: 与 [2] 相比好处在于可以通过百分比确定子元素高 */
.child {
  height: 50%;
  position: absolute;
  top: 50%;
  margin: -25% 0 0 0;
}

/* [4]: 子元素高度可以是百分比,也可以是一个确定的值 */
.childs {
  height: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
复制代码

grid(栅格布局)

grid 其实用在垂直居中这种地方并不是非常合适,有种杀鸡焉用牛刀的感觉。当然,这也是一个非常强大的布局,同样,感兴趣的同学可以看看向军老师的 像开法拉利一样写CSS3 ,程序员来体验未来的CSS3布局方式 ,GRID 栅格系统真香

用在此处,仅仅需要两个空 div 辅助即可:

<div class="grid-container">
  <div class="placeholder"></div>
  <div class="center"></div>
  <div class="placeholder"></div>
</div>

<style>
.grid-container {
  width: 300px;
  height: 300px;
  display: grid;
}
</style>
复制代码

需要注意,这种居中方式,是将父容器等分成三块,content 置于中间那块实现的。

设置第三方基准

这个方法的实现原理就是通过一个高度等于父元素一半的辅助元素,将想要居中的子元素顶到对应位置去。需要注意的是,将子元素移动的方式可以使用 margin 负值,也可以使用 transform

<div class="grid-container">
  <div class="placeholder"></div>
  <div class="center"></div>
</div>

<style>
.container {
  width: 300px;
  height: 300px;
}

.placeholder {
  height: 50%;
}

.center {
  height: 100px;
  margin: -50px;
}
</style>
复制代码
我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章