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

最新推荐文章于 2021-06-04 01:56:38 发布

erdouzhang

最新推荐文章于 2021-06-04 01:56:38 发布

阅读量1.5k

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/erdouzhang/article/details/71158164

版权

css3 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

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

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

使用盒布局的时候，可以使用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>