阅读 519

css垂直水平居中总结

水平居中

内联元素水平居中

使用text-align可以实现行内元素的水平居中,不止是行内元素display: inline-block都可以实现元素的居中:

.parent {
  text-align: center;
}
复制代码

在先前提到text-align可以让inline-block的元素居中,那么如果子元素是块级元素,我们可以设置子元素为inline-block,父元素使用text-align进行居中,这种也可以用来实现多个元素的水平居中。inline-block的元素具有block的宽度高度属性值,同时也具有inline的同行特性,下面是他的代码:

.parent {
  text-align: center;
}
.child {
  display: inline-block;
  width: xx;
  height: xx;
}
复制代码

块级元素水平居中

通过设置元素的margin-left和margin-right都为auto,就能够让元素进行水平居中

.parent {
  margin: 0 auto;
}
复制代码

通过设置定位方式进行水平居中,这里分为两种情况,一种是知道宽度,另外是不知道宽度,第一种知道宽度的代码如下:

.parent {
  position: relative;
}
.child {
  position: absolute;
  width: 100px;
  left: 50%;
  margin-left: -50px;
}
复制代码

第二种不知道宽度的情况:

.parent {
  position: relative;
}
.child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
复制代码

为什么有了第二种还用第一种,因为transform是css3新加的,可能兼容性不太好,需要写兼容性写法。

垂直居中

文本元素垂直居中

下面讲的这种方法适合子元素为当行文本的情况,就是父元素的height等于子元素的line-height;

  .parent {
    height: 200px;
  }
  .child {
    line-height: 200px;
  }
复制代码

图片进行垂直居中

可以使用vertical-align对图片进行垂直居中。这个属性需要明白他的应用场景,改属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐方式,注意一定是行内元素。

  .img1 {
    vertical-align: middle;
  }
  .img2 {
    vertical-algin: middle;
  }
复制代码

使用定位

同水平居中一样,都可以使用margin, transform来进行定位。下面讲transform的例子,margin的设定方式可以对比:

  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
复制代码

flex布局

flex布局我在flex布局精讲。flex用起来特别爽,上面这些都不是问题,就是需要写兼容。

关注下面的标签,发现更多相似文章
评论