实现图片始终居中显示于浏览器窗口中心位置

时间 2019-12-26

标签实现图片始终居中显示浏览器窗口中心位置栏目浏览器繁體版

原文原文链接

盒模型

在敲代码以前，首先创建一个盒模型，这让写代码的时候变得思路清晰。css

本案例中，所要实现的是图片居中显示，超出浏览器窗口部分的图片隐藏。所以，盒模型如图：html

图片以浏览器窗口做为定位元素，居中显示。超出浏览器窗口部分的图片则被隐藏。浏览器

法一：body元素做为父元素，图片采用img元素

< HTML >字体

<body>
    <img src="图片路径地址" alt="图片说明" />
</body>

结构部分就是这么简单，咱们所须要的实际内容只有一张图片。剩下的则是CSS所完成的部分。spa

< CSS >code

*{
    margin:0;/* 1 */
    padding:0;/* 2 */
}
html,body{
    overflow-x:hidden;/* 9 */
}
body{
    position:relative;/* 3 */
    min-width:图片宽度的80%;/* 10 */
    min-height:图片的高度;/* 8 */
}
img{
    position:absolute;/* 4 */
    left:50%;/* 5 */
    top:0;/* 6 */
    margin-left:-图片宽度的一半;/* 7 */
}

说明：注释的部分是代码书写顺序。咱们并非一口气将全部想要的效果直接实现的，而是从最基本效果一步步添加实现的。htm

首先，咱们初始化浏览器信息，内外边距所有设置为0；其次，咱们以body做为定位元素，因此要设置body元素的定位方式为相对定位 ; 图片以body元素居中定位，因此要设置定位方式，左右偏距，以及左外偏距为负的图片宽度的一半，这样就实现了图片中心点位于浏览器窗口，即body中心位置。图片

注意：一旦设置了绝对定位，必定要设置left和top的值，即便上述中不设置top的值没有任何影响状况下，也要设置。文档

当浏览器窗口宽度小于图片宽度时，超出窗口部分的图片就会溢出，body元素出现滚动条。为了消除滚动条，咱们添加/* 9 */这条语句。it

注意：消除浏览器窗口滚动条，标准写法是html,body{overflow:hidden;}，而不是body{overflow:hidden;}

此时，基本彻底实现了功能。可是你们能够尝试下，当窗口的宽度拉到很小时，因为图片始终居中显示，图片两侧超出部分的内容所有被隐藏，使得图片只能显示很是小一部份内容，这显然是不行的。咱们但愿，当窗口宽度小到必定程度时，图片再也不发生位置移动。所以，咱们添加了/* 10 */这条语句。设置body的最小宽度，当窗口宽度小于body最小宽度时，body宽度将再也不发生变化，天然，img元素以其做为定位元素，img的位置也不会发生变化了。至于最小值取多少，你们能够本身设定。取图片的80%为最小值，能够保证图片大部分有效信息将获得保留。

注意：img元素绝对定位后，对于body父元素来讲至关于不存在。此时，body元素的高度为0（不存在任何内容）。所以，为了可以让img元素正常显示，须要设置body元素的高度，且为了可以增长新的内容，应该设置min-height属性。

思考：以body做为父元素进行定位，有什么缺点？

答：显然，img绝对定位后，脱离了文档流（也就是说，对于img元素后面的内容，仿佛img元素不存在了，其余内容会在img元素的位置显示内容，而不是img下面显示内容。）好比：

<body>
    <img .../>
    <p>上面是一张图片</p>
</body>

若img元素绝对定位了，则位于img元素后面的p元素，它的内容你们可能就看不到了。缘由是，p元素的内容显示在img图片的位置，而img图片又将p元素的内容覆盖了。你们若想查看p元素内容，能够给p元素设置padding-top，值为图片的高度，则能够看到p元素的内容了。

提醒：关于绝对定位，我还想说两点内容。

第一，设置完绝对定位后，是否要给元素设置width和height？

答：通常不须要。绝对定位是对元素进行压缩，压缩到最小尺寸。上述中，咱们对img元素绝对定位，img元素是一个行级元素，是没法被压缩的。也就是说，图片的尺寸是多少，绝对定位之后img元素的宽高仍是多少。所以，没有必要再从新指定img元素的宽高了。然而，有些状况下，是须要指定width值的。好比，一个块级元素，div或ul。这里用ul元素更能说明问题。假设，原来的ul显示效果示意如图：

我是第一个
我是第二个

ul下的每个li元素单独占据一行。当ul绝对定位之后，显示效果仍然没变，只是本来li元素是占据整行的宽度，如今被压缩成实际所须要的宽度了。此时，若是咱们但愿ul中的每一项显示效果示意如图所示：

●我是第一个 ●我是第二个

即水平显示，则咱们能够对ul设置width值，width值足够容下两个li元素内容时，天然就水平分布了。

综上，该问题的回答是：高度是不须要设置的。由于一旦设置了高度，则不可以扩展内容。宽度视状况而定，对于图片这样的行级元素，无需设定；对于块级元素，能够设定width值。

第二，绝对定位是怎么个意思，上述举的p元素内容被覆盖怎么理解？

答：绝对定位，你们能够想象成上升一个高度，即浮起来了。好比上述举例中，img绝对定位，它浮起来了，后面的p元素天然钻了空子，占据它原来的位置，而且在img元素的下方。说道这，你们就知道为何绝对定位后会增长一个属性，叫作z-index。只有绝对定位的元素才有该属性，用来讲明该元素浮动了多高。实际上，就是从平面，变成了三维坐标。有人可能会想，img元素不是浮起来了吗，咱们将它z-index设置为负值，不就到z轴的负数部分，不就能显示p元素内容了吗？其实是这样的，对于没有浮动的元素，至关于z-index等于0。所以，咱们设置img的z-index为-1，则能显示p元素的内容了。（若仍然看不出，多是由于p元素的字体颜色，能够设置p元素字体颜色为白色或其余易观察颜色。）

法二：div元素进行定位，图片采用img元素

大部分时候，咱们并不想对body元素进行操做，也不想以body元素做为定位元素。同时，以body做为定位元素，img绝对定位之后，后续元素收到绝对定位影响没法正常显示（后续会讲如何解决该问题）。所以，咱们设置一个空元素div，以div做为定位元素。盒模型如图：

设置一个空元素div，让该div居中浏览器窗口。图片元素以该div元素进行绝对定位，超出浏览器窗口部分图片被隐藏。

< HTML >

<body>
	<div id="container">
	    <img src="图片地址" alt="图片说明" />
    </div>
</body>

< CSS >

*{
    margin:0;/* 1 */
    padding:0;/* 2 */
}
html,body{
    overflow-x:hidden;/* 10 */
}
#container{
    width:800px;/* 3 */
    margin:0 auto;/* 4 */
    position:relative;/* 5 */
    height:图片高度;/* 11 */
}
#container img{
    position:absolute;/* 6 */
    left:50%;/* 7 */
    top:0;/* 8 */
    margin-left:-图片宽度的一半;/* 9 */
}

说明：首先仍是初始化；设置#container元素居中，因此设置了width值，该值你们能够本身取，决定图片最小有效部分的大小，而后做为定位元素设置为相对定位；设置图片绝对定位，及定位位置；为了消除滚动条，增长/* 10 */这条语句；此时会发现，图片不见了！这是由于被overflow隐藏了。为了显示出图片，须要给做为定位元素的父元素，即#container元素设置一个高度，这个高度就是显示的图片的高度，所以增长了/* 11 */这条语句。

如今咱们在img元素下面也加入一个p元素，看看效果。

<body>
    <img .../>
    <p>上面是一张图片</p>
</body>

发现，p元素的内容出如今图片的后面，仿佛图片没有脱离文档流同样，咱们能看到啦！

实际上，这是由于咱们给#container设置了高度的缘由，这个高度等于图片的高度，所以图片虽然脱离了文档流，可是被显示地撑了起来，这就是解决绝对定位对后续元素影响的方法：给绝对定位的元素套一个父元素，并设置父元素的高度，撑起来！

好比法一中，若想消除img定位的影响，就能够给img套一个div，而后设置div的高度为图片的高度就好了。

总结：根据不一样的盒模型，还有好多种实现方法。同时，img元素也能够用背景图来代替，这样的话，又衍生出好多盒模型。你们本身尝试下吧，有问题或文章哪些不足与错误，请你们留言不吝赐教。

须要牢记的一些东西：

1.设置了绝对定位，必定要设置left和top

2.绝对定位元素会浮起来，视状况设置绝对定位的宽度。

3.绝对定位元素大小超过父元素大小，不会产生溢出。实际上，父元素已经不将绝对定位的元素认做‘儿子’了，看做不存在。

4.消除绝对定位影响的方法，是给做为定位的父元素设置一个高度。