HTML 图片调整大小和居中

Question

虽然我已经阅读了很多试图调整我的图像大小的帖子，但它不起作用，有人可以帮助我将图像居中并缩小吗？

HTML:

<div id="mainBody">
<div id="image">
    <img src="http://s10.postimg.org/6b22cnbfd/jpg">
</div>

CSS:

.mainBody{
    width: 100%;
    margin-right: auto;
    margin-left: auto;}
.image {
    width: 60%;
    position: fixed;
    align-items: center;}
.image img{
    position: fixed;
    display:block;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;}
'

Answer 1

它没有居中，因为它的位置设置为固定的。 margin: 0 auto 不适用于固定位置元素。您必须将 left 设置为 50%，然后使用负 margin-left 将其拉回宽度的一半。例如:

img {
    position:fixed;
    width:300px;
    left:50%;
    margin-left:-150px;
}

http://jsfiddle.net/e24d0bx6/1/