命题：如下不定宽高的父元素与子元素
<div class="parent"> <div class="child">DEMO</div> </div>问题一：使子元素水平居中
方案1：
.child{ display:inline-block; //ie6、7可用{display:inline;zoom:1;}进行兼容 } .parent{ text-align:center; }优点：浏览器兼容性好
缺点：子元素会继承文本居中特性，故如不希望子元素中文本居中，可对子元素设置{text-align:left;}
方案2：
.child{ display:table; //此属性能使元素宽=内容宽，且具有block属性。 margin:0 auto; }优点：只需要对child进行设置
缺点：不兼容ie6.7。可对结构进行改造，改成table标签
方案3：
.parent{ position:relative; } .child{ position:absolute; left:50%; -webkit-transform:translateX(-50%); //-webkit代表谷歌内核识别码 -moz-transform:translateX(-50%); //-moz代表火狐内核识别码 -ms-transform:translateX(-50%); //-ms代表ie内核识别码 -o-transform:translateX(-50%); //-o代表欧朋【opera】内核识别码 transform:translateX(-50%); //符合W3C标准 }缺点：低版本ie6、7及8不支持transform，不同浏览器也可能有兼容问题。
方案4：
// 1 .parent{ display:flex; justify-content:center; } // 2 .parent{ display:flex; } .child{ margin:0 auto; }缺点：低版本ie6、7及8不支持flex
问题二：使子元素垂直居中
方案1：
.parent{ display:table-cell; vertical-align:middle; //可作用于inline/inline-block/table-cell }缺点：不兼容ie6.7。可对结构进行改造，改成table标签
方案2：
.parent{ position:relative; } .child{ position:absolute; top:50%; -webkit-transform:translateY(-50%); //-webkit代表谷歌内核识别码 -moz-transform:translateY(-50%); //-moz代表火狐内核识别码 -ms-transform:translateY(-50%); //-ms代表ie内核识别码 -o-transform:translateY(-50%); //-o代表欧朋【opera】内核识别码 transform:translateY(-50%); //符合W3C标准 }缺点：低版本ie6、7及8不支持transform，不同浏览器也可能有兼容问题。
方案3：
.parent{ display:flex; align-items:center; }缺点：低版本ie6、7及8不支持flex
问题三：使子元素垂直水平都居中
方案1：
.parent{ text-align:center; display:table-cell; //可把结构换成table vertical-align:middle; //可作用于inline/inline-block/table-cell}.child{ display:inline-block; //ie6、7可用{display:inline;zoom:1;}进行兼容}方案2：
.parent{ position:relative; } .child{ position:absolute; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); //-webkit代表谷歌内核识别码 -moz-transform:translate(-50%,50%); //-moz代表火狐内核识别码 -ms-transform:translate(-50%,50%); //-ms代表ie内核识别码 -o-transform:translate(-50%,50%); //-o代表欧朋【opera】内核识别码 transform:translate(-50%,50%); //符合W3C标准}方案3：
.parent{ display:flex; justify-content:center; align-items:center; }缺点：兼容性较差
总结：
在解决类似问题时，要掌握各css特性，然后把问题进行分解，最后结合特性桌布解决。还要掌握各css的兼容性
转载于:https://www.cnblogs.com/july-Vivian/p/4614503.html
相关资源：Android手机开发 使用线性布局和相对布局实现Button垂直水平居中