序號 | 針對類型 | 設置 | 限制 |
1 | 水平居中 | margin-left:'auto',margin-right:'auto' | 浮動元素和絕對定位元素無效 |
2 | 行內元素水平居中 | text-align:'center' | 在ie6,ie7可以適應任何元素 |
3 | 單行文字垂直居中 | line-height:父容器的高度 | 多行文字不適應 |
4 | 使用表格td/th | align:'center',valign:'middle' | |
5 | css控制表格 | valign:‘middle’,text-align:‘center’ | text-align適用於ie6,ie7,其它ie8+,火狐谷歌等瀏覽器只能適用於行內元素,塊級元素只能使用align居中 |
6 | 非表格元素 | display:table-cell,valign:middle,text-align:center | 適用於ie8+、谷歌火狐主流瀏覽器,對於ie6、ie7無效 |
7 | 絕對元素居中 | position:absolute,left:50%,margin-left:-50px,top:50%,margin-top:-50px | |
8 | 絕對元素居中 | position:absolute,left:0,right:0,top:0,bottom:0,margin:auto | |
9 | 浮動+相對定位 | flaot:left,position:relative,left:50%等等 | 必須增加一個包裹的父元素 |
10 | font-size垂直居中 | 父元素:fontsize:父元素高度/1.14子元素:vetical-align:middle | ie6,ie7有效,父元素高度已知,子元素寬高未知 |
需要解決的是不同瀏覽器的居中方案搭配問題。
https://www.cnblogs.com/2050/p/3392803.html