CSS居中大礼包

                             **CSS居中大礼包**

水平居中

• 行内元素&行内块元素：看父元素是不是块级元素，如果是，直接父元素加text-align

• 如果不是，可将父元素设置为块元素，再用text-align:center; 块元素：如果设置的宽度，谁居中谁就直接设置margin 0 auto;

• 如果没设置宽度，就将子元素设置为行内或者行内块元素，再给父元素加text-align:center,子元素宽度又内容撑开

• 使用定位元素，父元素是相对定位，子元素(假如宽度是100px)是绝对定位 子 元素设置 left:50%;
  margin-left:-50px; 或者transform:translateX(-50%);

• 利用flex布局实现水平居中 父元素设置display: flex; justify-content:center;

垂直居中

• 行内元素： 设置单行的行内元素居中，只要父元素设置行高等于盒子高度，子元素就会垂直居中

• 块元素 ： 根据定位 子元素(width:100px)top:50%
  margin-top:-50px;或者translateY(-50%)

• 给待处理的块元素的父类元素添加 display:flex; align-items:center

水平垂直居中

• 已知高度的块元素， 父元素相对定位，子元素绝对定位，子元素设置top: 0; right: 0; bottom: 0;left:0; margin:auto;

• 设置父相子绝之后，给子元素设置left:50%; top:50% ；margin-top:-(自身高度的一半)；margin-left:-(自身宽度的一般);

• 未知高度的和宽度的时候设置不了margin 就用left:50%; top:50% ；transform:
  translate(-50%, -50%);

• 利用flex布局实现，给父元素设置 display:flex; justify-content:center
  ;align-items:center;