欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css实现垂直方向上的居中方式

程序员文章站 2022-04-25 14:31:08
...

 

(1)偏移量解决

css实现垂直方向上的居中方式

思路:

首先水平方向居中margin: 0 auto,不必多说

css实现垂直方向上的居中方式

其次让居中元素脱离文档流,使它距离top50%,这样的结果就是元素本身的顶部到达盒子的中间

position: relative;//脱离文档流

  top: 50%;//设置top50%一半

css实现垂直方向上的居中方式

最后:再把元素本身上移本身的一半就实现了垂直居中(为什么是一半的高度?因为刚刚偏移了50%顶部在中间,多移了元素本身高度的一半,所以再移回去本身高度的一半即可)

margin-top: -100px;//上缩一半

css实现垂直方向上的居中方式

完整:

html
 <div class="box">
          <div class="item"></div>
 </div>

css:
.box{
  height: 500px;
  width: 500px;
  background-color: #409eff;
  border: 1px solid;
}
.item{
  height: 200px;
  width: 200px;
  background-color: #999;
  margin: 0 auto;//水平方向居中
  position: relative;//脱离文档流
  top: 50%;//设置top50%一半
  margin-top: -100px;//上缩一半

}

(2)css3实现:

transform: translateY(-50%);思路如上是使得div向上平移(translate)自身高度的一半(50%)

代码:

html
 <div class="box">
          <div class="item"></div>
 </div>

css:
.box{
  height: 500px;
  width: 500px;
  background-color: #409eff;
  border: 1px solid;
}
.item{
  height: 200px;
  width: 200px;
  background-color: #999;
  margin: 0 auto;//水平方向居中
  position: relative;//脱离文档流
  top: 50%;//设置top50%一半
  transform: translateY(-50%);//上缩一半

}

(3)利用flex。(也是最简单的)

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

.box {
  height: 500px;
  width: 500px;
  background-color: #409eff;
  border: 1px solid;
  display: flex;
  align-items: center; /*定义body的元素垂直居中*/
  justify-content: center; /*定义body的里的元素水平居中*/
}
.item {
  height: 200px;
  width: 200px;
  background-color: #999;
}

 

相关标签: css