如何让一个元素居中

摘要

在平时编写网页的过程中,元素居中应该是网页布局中非常常见的一种CSS效果。对于元素居中常见的有这三种:水平居中、垂直居中、水平垂直居中。

对于块级元素的水平居中,我们常常借助marin: 0 auto;来实现;对于行内块元素,我们常常借助text-align: center;来实现。简单说来,元素的水平居中并不困难。

在平时编写网页的过程中,元素居中应该是网页布局中非常常见的一种CSS效果。对于元素居中常见的有这三种:水平居中、垂直居中、水平垂直居中。

对于块级元素的水平居中,我们常常借助marin: 0 auto;来实现;对于行内块元素,我们常常借助text-align: center;来实现。简单说来,元素的水平居中并不困难。

元素的垂直居中应该是相对较难的一种。在垂直居中中,我们最常见的一个需求就是文字垂直居中。对于文字垂直居中,我们通常都是将行高和元素的高保持一致来实现文字垂直居中。但是这种方法有一个致命的缺陷,就是元素高度需要提前知道。同时,这种方法也有一个弊端,就是当元素的高度发生改变时,需要我们手动去修改行高。虽然这种情况不常出现,但是确不够灵活。

可能正是由于这个原因,所以在CSS3中新增了flex布局。相比较于行高的方式,flex最大的优点就是我们不需要提前知道元素的高度,这也就保证了元素的高度在发生变化后不需要进行二次修改。

通常我们都是给元素设置如下样式:display: flex; align-items: center; height: inherit;来达到元素的垂直居中。

在水平居中、垂直居中、水平垂直居中这三种常见的居中方式中,以水平垂直居中最难。

如果让一个已知宽高的元素(如:宽、高各200px)水平垂直居中,常见的方式如下:

方法一:要居中元素的父级添加相对定位,要居中元素设置绝对定位,然后将left和top值设置为50%,最后通过margin-left负宽度的一半,margin-top负高度的一半即可。

  1. E {
  2.     positionrelative;
  3. }
  4. E F {
  5.     positionabsolute;
  6.     left: 50%;
  7.     top: 50%;
  8.     width200px;
  9.     height200px;
  10.     margin: -100px 0 0 -100px;
  11. }

方法二:要居中元素的父级添加相对定位,要居中元素设置绝对定位,然后将left、top、right、bottom设置为0,最后设置margin: auto;即可。

  1. E {
  2.     positionrelative;
  3. }
  4. E F {
  5.     positionabsolute;
  6.     left: 0;
  7.     top: 0;
  8.     rightright: 0;
  9.     bottombottom: 0;
  10.     width200px;
  11.     height200px;
  12.     marginauto;
  13. }

对于一个未知宽高元素水平垂直居中,这个难度系数就相当高了。不过在CSS3出现后,这些都变成了“小儿科”。

方法一:要居中元素的父级盒模型设置为flex,并且有明确高度。

  1. E {
  2.     display: flex;
  3.     justify-contentcenter;
  4.     align-items: center;
  5.     height: 100%;
  6. }

方法二:要居中元素的父级添加相对定位,要居中元素设置绝对定位,然后将left和top值设置为50%,最后设置transform: translate3d(-50%, -50%, 0);即可。

  1. E {
  2.     positionrelative;
  3. }
  4. E F {
  5.     positionabsolute;
  6.     left: 50%;
  7.     top: 50%;
  8.     transform: translate3d(-50%, -50%, 0);
  9. }

就个人习惯而言,在不考虑低版本浏览器的情况下,建议使用最后一种方法做元素的水平垂直居中,这样能省去很多不必要的麻烦。

shaw

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: