CSS基础知识点（二）——居中

水平居中

　　(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; 60%(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; 60%(90px); height:60%(height:50px); 

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