首页 前端知识 【CSS】HTML中实现元素垂直居中的方法

【CSS】HTML中实现元素垂直居中的方法

2024-01-25 11:01:53 前端知识 前端哥 210 186 我要收藏

HTML中实现元素垂直居中常用的3种方法汇总

日常项目中经常会遇到要求某一元素在父元素种垂直居中,实现的效果:
在这里插入图片描述
初始HTML和css部分:

<!-- 父元素 -->
<div class="parentBox">
  <!-- 子元素 -->
  <div class="childenBox">
  </div>
</div>

<!-- css -->
<style>
.parentBox {
  width: 800px;
  height: 500px;
  background: #ccc;
}
.childenBox {
  width: 200px;
  height: 200px;
  background-color: #ff0000;
  color: #fff;
}
</style>

以下将介绍css实现垂直居中最常用的3种方法:

一、利用line-height属性来实现

  1. 父级元素设置line-height属性的值等于父级元素的高度,并且给text-align属性的值设置为center;
  2. 将子级元素设置行内块元素,控制vertical-align属性来控制是否居中;
<!-- css -->
<style>
.parentBox {
  width: 800px;
  height: 500px;
  background: #ccc;
  text-align: center;  /* 水平居中 */
  line-height: 500px;  /* 行高等于高度的值 */
}
.childenBox {
  width: 200px;
  height: 200px;
  background-color: #ff0000;
  color: #fff;
  display: inline-block;  /* 设置为行内块元素 */
  vertical-align: middle;  /* 行内居中 */
}
</style>

二、利用position定位来实现

  1. 给父级元素设置相对定位position: relative;
  2. 给子级元素设置绝对定位position: absolute;
  3. 给子级元素top和left值50%,margin-left和margin-top各给子级元素宽和高的负的一半(注意:这个地方之所以这样给,是因为定位的元素的left和top值是根据元素左上角来作为基准点,同理right和bottom是根据元素右下角来作为基准点,top:50%后左上角那个点相对于父级元素已经在最中间,但是加上子级元素本身的高度,子级元素相对于父级元素是偏下了一个子级元素的高度,所以需要向上移动其高度一半的距离,同理left也是一样);
<!-- css -->
<style>
.parentBox {
  width: 800px;
  height: 500px;
  background: #ccc;
  position: relative;  /* 父级元素相对定位 */
}
.childenBox {
  width: 200px;
  height: 200px;
  background-color: #ff0000;
  color: #fff;
  position: absolute;  /* 子级元素绝对定位 */
  left: 50%;
  top: 50%;
  margin-left: -100px;  /* 负宽度的一半 */
  margin-top: -100px;  /* 负高度的一半 */
}
</style>

三、利用flex布局来实现

给父元素设置flex布局,通过align-items和justify-content属性来控制子元素的水平垂直居中

<!-- css -->
<style>
.parentBox {
  width: 800px;
  height: 500px;
  background: #ccc;
  display: flex;  /* 设置flex布局 */
  align-items: center;  /* 直接子元素垂直居中 */
  justify-content: center;  /* 直接子元素水平居中 */
}
.childenBox {
  width: 200px;
  height: 200px;
  background-color: #ff0000;
  color: #fff;
}
</style>

以上是个人经验,希望对大家有所帮助!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/305.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!