css3 - 在浏览器窗口正中央显示图像

最新推荐文章于 2023-06-20 14:50:04 发布

原创最新推荐文章于 2023-06-20 14:50:04 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

css3 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一种利用CSS盒布局的box-pack与box-align属性来实现网页元素在浏览器窗口中垂直居中的方法，并通过实际代码示例展示了如何兼容Firefox、Safari及Chrome等浏览器。

实现盒子垂直居中（用绝对定位来实现盒子垂直居中）

遮罩下盒子垂直居中（用固定定位实现盒子垂直居中）

使用盒布局的时候，可以使用box-pack属性及box-align属性来指定元素中文字、图像及子元素水平方向或垂直方向的对齐方式。使用Firefox浏览器中，需要使用-moz-box-pack、-moz-box-align的形式；在Safari、Chrom浏览器中，需要使用-webkit-box-pack、-webkit-box-align的形式。

在使用CSS 1.0或CSS 2.0的时候，还有一种比较难处理的情况，就是如何让图像位于元素正中央，使用box-pack属性及box-align属性，同样也使该问题很容易就得到了解决。

如图，为一个浏览器窗口正中央显示图像，不管浏览器如何变化，该图像始终位于浏览器正中央。

在线演示

这里写图片描述

html：

<img src="images/05.jpg" alt="">

css：

<style>
      html,body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
      body {
        display: -moz-box;/*兼容Firefox*/
        display: -webkit-box;/*兼容FSafari、Chrome*/

        -moz-box-align: center;/*兼容Firefox*/
        -webkit-box-align: center;/*兼容FSafari、Chrome */

        -moz-box-pack: center;/*兼容Firefox*/
        -webkit-box-pack: center;/*兼容FSafari、Chrome */
      }
      img {
        width: 160px;
      }
</style>