水平居中

  (1) 对于块级元素,最常用的自适应水平居中为:margin:0px auto; (与 margin:auto; 效果相同)

  (2) 对于行内元素(a, img, input等),最常用的水平居中方式为:对其父级元素设置 text-align:center; 

  (3) 对于有特殊定位的元素(块级元素),如fixed, absolute, relative:

    (相对于最近的有特殊定位的父级元素的居中)

  • 不使用left:50%;结合margin一起用。

    左右居中:position:fixed; left:0px; right:0px; margin:0px auto;

  • 使用left:50%; 和margin结合。

    左右居中:position:absolute; width:60%(width:50px);  

           left:50%; margin:0px 0px 0px -30%(-25px);

 

垂直居中

  (1) 对于单纯的文本('hahaha')使用:line-height

    <div class="txt">hahaha</div>   .txt{height:40px; line-height:40px;}

  (2) 行内元素(a, img, input等),垂直居中的方法:(line-height 和 vertical-align 一起使用)

    可以在其父级元素上设置与height相同值的line-height,然后对于块级元素设置:vertical-align:  middle (center) ;

  (3) 对于有特殊定位的元素(块级元素),如fixed, absolute, relative:

    (相对于最近的有特殊定位的父级元素的居中)

    与这种情况下的左右居中原理相同,只需把(3) 中的 left, right 换成 top, bottom 即可。

 

上下左右全部居中

  这里只给出第(3)情况下时提到的方法,

  • position:fixed; left:0px; right:0px; top:0px bottom:0px; margin:auto;
  • position:absolute; width:60%(width:90px); height:60%(height:50px)

   left:50%; top:50%; margin: -30%(-25px) 0px 0px -30%(-45px);