水平居中
(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);