第一种方法 table方法
// html部分 ////// css部分 // 不能兼容IE7及以下 .center-wrap { display: table; background: hsl(120, 100%, 97%); width: 800px; height: 500px; margin: 0 auto; } .center { display: table-cell; text-align: center; vertical-align: middle; background-color: red; }// ////
第二种 position方法
// 也不能兼容IE7及以下 .center{width: 500px; height: 500px; position: relative; background-color: red;} .center img { margin: auto; overflow: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
第三种 translate方法
// 也不能兼容IE8及以下 .center { background: red; position: relative; width: 500px; height: 500px; } .center img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
第四种 Flexbox方法
//ie9貌似不支持 //新版的浏览器应该支持 .center { background: hsl(240, 100%, 97%); width: 500px; height: 500px; display: flex; justify-content: center; align-items: center; } .center img { }第五种 可以兼容ie6 ie7 点击查看demo
25 Feb 2016