css常用水平垂直居中方法总结

水平居中

1.对于行内元素

text-align: center;

2.对于确定宽度的块级元素

• margin: auto

.one {
    left: 0;
    right: 0;
    margin: auto;
  }

• left: 50%
  因为间距是以左上角为起点的，所以left：50%之后还需要减去一半的宽度达到水平居中的效果。值得注意的是，position为absolute时，这个居中是相对于body或者position也是absolute的父元素。而relative是相对于他原本的位置进行偏移。

.two {
   position: absolute;
   left: 50%;
   margin-left: -100px;
 }

3.对于未知宽度的块级元素

• transform
  在绝对定位下，利用translateX()属性来根据元素本身的宽度移动

.three {
	position: absolute;
	left: 50%;
	transform: translateX(-50%); /* 移动元素本身50% */
}

• 对于行内块级元素的相对定位
  这种方法是针对子类是行内元素的，如果使用text-align: center的方法他会在父类的宽度下居中，如果要对比父类更高元素的水平居中，就需要先将父类转换成inline-block,再进行偏移。但是这样对父类又会有些麻烦…如图所示

.four {
  display: inline-block; 
  position: relative;
  left: 50%;
}
.child {
  position: relative;
  right: 50%;
}

4.万金油法(flex)

在实际项目中，通常会出现页面中的某个容器的总体布局是居中的情况，用之前的方法会比较麻烦。使用CSS3中给出的flex属性定义弹性盒子，可以批量的对一个父类的所有子类实现居中，而子类的子类则需要在子类中再设置
网上很多详细的图文教程这里简要说明一下
align-items: 定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
justify-content: 在主轴（横轴）方向上的对齐方式
flex-direction: 要对齐的方向是row还是column;

.five {
  display: flex;
  align-items:center;
  justify-content: center;
  flex-direction: row;
}

<div class="five aqua">
  <div class="big red">
  	<div class="green small">div>
  div>
  <div class="big red">div>
div>

垂直居中

垂直居中与水平居中方法一样，把left、right改成top、bottom，flex布局中的方向改成column即可。