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用起来特别爽，上面这些都不是问题，就是须要写兼容。