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

css中元素垂直居中对齐的几种方式

程序员文章站 2022-04-26 16:04:27
...
1. table td 居中对齐

使用table布局,利用table td元素的vertical-align来实现垂直居中
优点:兼容性好,ie8+都支持
要点:改变需要垂直居中的元素的父元素的display,设为table-cell即可
注意:设为table-cell的父元素会受其父元素的布局影响,具体使用时,请根据情况看是否要使用额外的包裹元素以消除影响

/* css */
.table-cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 200px;
  width: 200px;
  background: grey;
}
.block {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: white;
}
<!-- html -->
<div class="table-cell">
  <div class="block">要居中的元素</div>
</div>

css中元素垂直居中对齐的几种方式

2. line-height 垂直居中

利用line-height设置父元素行高和子元素的vertical-align: middle配合来实现垂直居中
优点:兼容性好
要点:父元素设置line-height和其高度一样,子元素(要垂直居中的那个)设置其vertical-align: middle
注意:父元素的font-size须设为0。由于我们的子元素是换行写的,所以子元素之前会存在换行符,如果不把父元素的font-size设为0,换行符(文本元素)会有一定的高度,我们要垂直居中的元素就不能真正居中了

/* css */
.line-height {
  position: relative;
  display: block;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  background: grey;
  font-size: 0;
}
<!-- html -->
<div class="line-height">
  <div class="block"></div>
</div>

css中元素垂直居中对齐的几种方式

3. transform垂直居中

使用css3的transfrom对元素进行平移,配合元素的top、left即可实现垂直居中。
要点:父元素需要设置position: relative,子元素position:absolute/relative。
注意:父元素必须设置position,这样子元素才能相对定位;还有不兼容ie8。

/* css */
.transform {
  position: relative;
  width: 200px;
  height: 200px;
}
.transform-block {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<!-- html -->
<div class="transform">
  <div class="block transform-block"></div>
</div>
4. flex布局垂直居中

使用flex布局,可方便快捷的实现垂直居中,只需要在父元素上设置display:flex; align-items: center即可实现
注意:flex在pc端的除了ie家族,都支持的挺好,ie10+可使用flex布局,不过可能需要-ms-前缀。
想要系统的了解flex布局,可阅读这篇文章

.flex {
   display: flex;
   width: 200px;
   height: 200px;
   align-items: center;
   justify-content: center;
 }
 <div class="flex">
   <div class="block"></div>
 </div>
5.grid布局垂直居中

使用grid布局也可实现垂直居中
注意:grid布局为二维布局,有行和列之分,grid布局较为复杂,且兼容性不是太好,ie家族基本不支持,如果有兴趣,可以去这里详细学习一下。

.grid {
   display: grid;
   width: 200px;
   height: 200px;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr;
   justify-items: center;
   align-items: center;
 }
 <div class="grid">
  <div class="block"></div>
 </div>

目前仅罗列了这5种方法,其实还有很多其他方法,比如使用padding也可以实现垂直居中,前提是子元素定宽定高。罗列的5种方法种,line-height、transform还有flex是使用最多的。现阶段ie市场份额越来越少,其实可以不用兼容ie低版本,这时基本上使用flex布局就可以方便快捷的实现我们想要的很多布局了。