需求：
针对浏览器窗口，图片水平居中。
浏览器窗口高宽未知；
图片高宽未知；且必须考虑图片比窗口大
要兼容低版本ie，所以不能用css3。
方式一：
<style>
html,body{
margin:0;
padding:0;
}
.container{
width:100%;
min-width: 1080px;
height: auto;
overflow: hidden;
}
.imgWrapper{
position: absolute;left: 50%;
}
.imgWrapper img{
width:auto;
height: auto;
position:relative;
left: -50%;
}
</style>
</head>
<body>
<div class="container">
<div>
<div class="imgWrapper">
<img src="./test.png">
</div>
</div>
</div>
</body>
方式二
<style>
html,
body {
margin: 0;
padding: 0;
}
.ct {
width: 100%;
height: auto;
min-width: 1080px;
overflow: hidden;
}
.clearfix::after {
display: block;
clear: both;
content: "";
}
.relaWrapper {
width: 100%;
height: auto;
min-width: 1080px;
left: 50%;
position: relative;
}
.imgWrapper {
float: left;
}
.imgWrapper img {
width: auto;
height: auto;
position: relative;
left: -50%;
}
</style>
</head>
<body>
<div class="ct">
<div class="relaWrapper">
<div class="clearfix">
<div class="imgWrapper">
<img src="./test.png">
</div>
</div>
</div>
</div>
</body>
方式三：
<style>
html,
body {
margin: 0;
padding: 0;
}
.ct {
width: 100%;
height: auto;
min-width: 1080px;
overflow: hidden;
}
.imgWrapper {
position: relative;
text-align: center;
right:50%;
}
.imgWrapper img {
width: auto;
height: auto;
margin-right: -100%;
}
</style>
</head>
<body>
<div class="ct">
<div class="imgWrapper">
<img src="./test.png">
</div>
</div>
</body>
最简单的方式，但是是写此文时才搜出来的。
参考http://www.greywyvern.com/?post=323
思路+解析：
一、需求分析
1.宽度不确定但是页面渲染时已经是固定宽度，这是前提。
2.容器的宽度由父宽度决定，此场景是浏览器窗口。
3.图片的宽度由图片src决定。（可以扩展成该待居中容器的宽度由其子决定，这样就可以适用于非图片。）
二、思路分析
方法一、二
- 图片高宽不确定，父也不确定，所以不能用background-image。虽然用background-image，居中非常容易，但是background-image是没有大小的，不能把自己撑开。so,
<img> - 宽度不确定，且子宽度可能超过父，text-align:center不能实现。left不超过左边看起来是优先级最高的。待证实
- 原生居中的css无法实现，就只能靠50%这种东西了。
- 要靠两个50%才能实现，即向右（父宽度-子宽度）/2。子大于父时即为向左。
- 无论是left\right；margin-left\margin-right，百分比都是相对于父容器。
- 所以如何实现有两个父容器，宽度竟然一个为窗口宽度，一个为图片宽度？
- 对于img（可替换元素可能都是），width:100%是图片宽度。
- 对于其他，width:100%是父级宽度。
- 如何让img的父拥有img的宽度才是问题关键。
- 9的答案，脱离父的限制：absolute和float都可以。img可以撑开它的宽度。测试得知，暂未找到理论依据
- 对于absolute和float而言，完全了父，无法实现再针对父实现left或者margin-left。
- 11的解决：让他再回归到正常文档流的布局。如下、
对absolute而言是通过拥有一个relative的父。absolute的相对定位由非static的元素。
对float而言有诸多方式，bootstrap提供的clearfix非常好用。暂且这个
方法三
text-align:center我一开始就放弃了，所以没有尝试。查出此方案也是很惊艳，以后为马后炮式解析
- 既然text-align:center必须是在左边界不超出的前提下，而子元素太大。那么可以‘缩小’子元素
- 此缩小为让父级眼中的img变小：margin-left/margin-right为负值就是一种方式。
设img的width=子宽度，窗口width=父宽度。终极目标：向左（子宽度-父宽度）/2。（此案例子比父宽，所以还是这样看着更顺眼） - img-> margin-left：-100%。子向左 1父宽度；在父眼里，子宽度=（子宽度-父宽度）
- 父->left:50%。父向右 1/2父宽度。父的中线已经在原父的由边界了，现祖父（窗口）右边界。
- text-align:center。将3造成的 （子宽度-父宽度）的子的中线，挪到4导致的窗口右边界。因此对子而言，向右挪动 父宽度-（子宽度-父宽度）/2
- 5和3造成的img的向左挪动结果为：1父宽度-（父宽度-（子宽度-父宽度）/2） = （子宽度-父宽度）/2
以上还是画图比较清晰。
此方案有大bug，不知是否text-align的局限性导致，比如左边界不超出的前提。以后再研究。
收获
无论网上有多少种居中解决方案，了解原理才是硬道理。
网友评论