Question

我知道这是一个noob-ish问题，但无论使用CSS更改页面/窗口的多少，是否可以将图像完全居中到网页的绝对中心？我正在使用一个简单的标签，我需要知道如何？我一直在寻找谷歌，但我没有得到任何相关的结果，可能是由于我缺乏正确的措辞......

我需要它水平和垂直居中。

谢谢！

Answer 1

以元素为中心：

.className {
    width:200px; /*Set to image width*/
    height:100px; /*Set to image height*/
    position:absolute; 
    top:50%; 
    left:50%; 
    margin:-50px auto auto -100px; /*Half of image width, 0, 0, half of image height*/
    text-align:center;
}

HTML：

<img src="whatever.jpg" class="className" />

的jsfiddle：

http://jsfiddle.net/Mutant_Tractor/xBRq9/

Answer 2

一个。要使背景居中（通常最好将图像居中这样）：

background-image: url(your/image.ext);
background-repeat: no-repeat;
background-position: center;

B中。通过在父级上设置text-align: center;，可以使内联元素（span，img，a）水平居中。

℃。 HTML块元素可以使用

水平居中

margin-left: auto;
margin-right: auto;

垂直居中是bit more complex。

Answer 3

我这样解决了：

img.class-name{

    position: absolute;
    margin: auto;
    left: 0; 
    right: 0;
    top: 0;
    bottom: 0;  
}

Answer 4

DEMO

你需要制作一个div并用

定位它

文本对齐：中心;

然后你可以像在小提琴中一样将图像垂直居中在div中

使用CSS完全居中图像？

4 个答案: