第一种:通过margin负值
1 | <div class="one"></div> |
1 | .one{ |
优点:
基本浏览器都能兼容
缺点:
必须要固定宽高
第二种:通过margin:auto
1 | <div class="two"></div> |
1 | .two{ |
以上两种方法都可以把absolute换成fixed,注意,fixed在ie下不支持
第三种:table-cell
1 | <div class="inner"> |
1 | .inner{ |
设置了table-cell之后,父元素就变成了一个单元格
关于使用table-cee布局
第四种:行内元素居中
1 | <div class="four"> |
1 | .four{ |
这种方法只能居中行内元素。常用于文字对其居中
第五种:transform居中
1 | <div class="five"></div> |
1 | .five{ |
好处就是不可不用定义宽高,但是对于不兼容css3的浏览器没有作用
第六种:伪类居中
1 | <div class="six"> |
1 | .six{ |
第八种:flex布局
1 | <div class="eight"> |
1 | .eight{ |
同样,会存在浏览器兼容问题