使用CSS在屏幕上居中放置图像-随机屏幕/图像尺寸 [英] Centering an image on screen using CSS - Random Screen/Image dimensions

问题描述

我必须创建一个网页，出于该问题的目的，该网页是在屏幕中心垂直和水平居中的单个图像.它具有以下要求:

I have to create a web page that for the purposes of this question is a single image centered both vertically and horizontally in the center of the screen. It has the following requirements:

• 客户端的屏幕尺寸未知(移动)
• 图片是用户定义的，因此尺寸未知
• 在所有设备上，图像必须在垂直和水平方向上完美居中
• 图像居中必须通过屏幕旋转来保持(即从纵向到横向)

作为CSS的新手，我用JavaScript定位内容，这是我所知道的唯一方法: http://jsfiddle.net/error454/8YL9a/

Being a bit of a CSS newb, I went and created this the only way I knew how, using javascript to position the content: http://jsfiddle.net/error454/8YL9a/

我正在寻找一种解决方案，其功能与我的解决方案相同，但使用CSS而不是硬方程式.

I'm looking for a solution that functions identically to my solution but uses CSS instead of hard equations.

推荐答案

display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-pack:center;
-webkit-box-align:center;

display:-moz-box;
-moz-box-orient:horizontal;
-moz-box-pack:center;
-moz-box-align:center;

CSS3属性，不良支持:webkit，mozilla.唯一的方法就是使用干净的标记和没有JS的CSS.

CSS3 property, bad support : webkit, mozilla. Only way to do it with clean markup and CSS without JS.

http://jsfiddle.net/t8qtn/6/

edit 2:为了将来校对，无前缀版本为

edit 2 : for future proofing, the prefixless version is

display:box;
box-orient:horizontal;
box-pack:center;
box-align:center;

这篇关于使用CSS在屏幕上居中放置图像-随机屏幕/图像尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！