水平居中

    1：行内元素居中，在行内元素上一级上面的块元素内添加 text-align:center;

    2：块级元素居中，为块级元素css添加  margin:0 auto; （要设置宽高值）

    3：块级元素居中，使用绝对定位position: absolute;同时设置负边距 margin-left: 负值；

  垂直居中

    1：处理文字居中，方法一就是设置把 line-height设置为您需要的box的大小（盒子的height）可以实现单行文字的垂直居中。

    2：要实现高度不固定的文字垂直居中使用padding就好了。

    3: display:table-cell;vertical-align: middle;即让标签元素以表格单元格的形式呈现,table-cell会被其他一些css属性破坏，比如float和position:absolute等等。且一旦         设置为table-cell，这时margin就不能用了。

    4: 在希望垂直居中的块级元素的父级元素的css中添加  display:flex;align-items:center; 可以实现块级元素的垂直居中。

  同时居中

    1：使用绝对定位和负边距position: absolute; margin-left: 负值（width的一半）；margin-top: 负值；

    2: 在希望居中的块级元素的父级元素的css中添加 display：flex；align-items:center实现竖直居中，justify-content:center;实现水平居中。

    3: 父元素中设置display:flex;在子元素中设置margin：auto。

    4：text-align: center; line-height:（heigh的值）;单行文字可以。

    5: css3属性 transform:translate(-50%,-50%); 使用这个可以实现自适应居中。

   补充：

    1：css3的transform属性

         transform的含义是：改变，使…变形；转换 。  transform:translate()：含义：变动，位移；如下表示向右位移120像素transform:translate(120px,0)

         transform:scale()：含义：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。   transform:skew()：含义：倾斜。                      transform:rotate()：含义：旋转；其中“deg”是“度”的意思，如“10deg”表示“10度”。

   2：vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom |inherit

baseline:将支持valign特性的对象的内容与基线对齐 

sub:垂直对齐文本的下标

super:垂直对齐文本的上标

top:将支持valign特性的对象的内容与对象顶端对齐

text-top:将支持valign特性的对象的文本与对象顶端对齐

middle:将支持valign特性的对象的内容与对象中部对齐

bottom:将支持valign特性的对象的内容与对象底端对齐

text-bottom:将支持valign特性的对象的文本与对象底端对齐

<percentage>:用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。

<length>:用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。(CSS2)

css居中