图像不居中使用css

Question

新手问题在这里。试图学习基础知识。我有一个页眉页脚和一个容器的简单页面。在那个容器中，我想要一个图像，并且我希望它居中。使用保证金：0汽车没有这样做。我曾尝试明确给容器一个宽度，但仍然不好。谢谢。

html, 
 
body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    height: 100vh; 
 
} 
 

 
#header { 
 
    position: relative; 
 
    height: 10%; 
 
    width: 100%; 
 
    background-color: yellow; 
 
} 
 

 
#footer { 
 
    position: relative; 
 
    height: 10%; 
 
    width: 100%; 
 
    background-color: lightgray; 
 
} 
 

 
#container { 
 
    height: 80%; 
 
    width: 100vw; 
 
    background-color: red; 
 
} 
 

 
#imagewrap { 
 
    position: absolute; 
 
    border: 1px solid #818181; 
 
    z-index: 2; 
 
    height: 75%; 
 
    display: block; 
 
    margin: 0 auto; 
 
}

<div id="header"> </div> 
 
<div id="container"> 
 
    <div id="imagewrap"> 
 
    <img src="Images/01Folder/Image.jpg" height="100%" id="front" /> 
 
    </div> 
 
</div> 
 
<div id="footer"> </div>

Answer 1

jsfiddle

除去position: absolute;并添加宽度imagewrap类。像width: 300px;

html, body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    height: 100vh; 
 

 
} 
 

 
#header { 
 
    position: relative; 
 
    height: 10%; 
 
    width: 100%; 
 
    background-color: yellow; 
 
} 
 

 

 
#footer { 
 
    position: relative; 
 
    height: 10%; 
 
    width: 100%; 
 
    background-color: lightgray; 
 
} 
 

 

 
#container { 
 
    height: 80%; 
 
    width: 100vw; 
 
    background-color: red; 
 
} 
 

 

 

 
#imagewrap{ 
 
    width: 300px; 
 
    border: 1px solid #818181; 
 
    z-index: 2; 
 
    height: 75%; 
 
    display: block; 
 
    margin: 0 auto; 
 
}

<div id="header"> 
 
    </div> 
 

 
     <div id="container"> 
 

 
     <div id="imagewrap"> 
 
     <img src="Images/01Folder/Image.jpg" height="100%" id="front" /> 
 
     </div> 
 

 
     </div> 
 

 
    <div id="footer"> 
 
    </div>

Answer 2

您可以添加text-align: center;而不是margin: 0 auto;到imagewrap

html, body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    height: 100vh; 
 

 
} 
 
#header { 
 
    position: relative; 
 
    height: 10%; 
 
    width: 100%; 
 
    background-color: yellow; 
 
} 
 
#footer { 
 
    position: relative; 
 
    height: 10%; 
 
    width: 100%; 
 
    background-color: lightgray; 
 
    display: block; 
 
} 
 
#container { 
 
    height: 80%; 
 
    width: 100vw; 
 
    background-color: red; 
 
} 
 
#imagewrap{ 
 
    position: absolute; 
 
    border: 1px solid #818181; 
 
    z-index: 2; 
 
    height: 75%; 
 
    display: block; 
 
    width: 100%; 
 
    text-align: center; 
 
}

<div id="header"> 
 
    </div> 
 

 
     <div id="container"> 
 

 
     <div id="imagewrap"> 
 
     <img src="Images/01Folder/Image.jpg" height="100%" id="front" /> 
 
     </div> 
 

 
     </div> 
 

 
    <div id="footer"> 
 
    </div>

Answer 3

尝试背景图像对于该容器，并将其定位中心。 请更改背景链接按您的要求

html, body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    height: 100vh;  
 
} 
 

 
#header { 
 
    position: relative; 
 
    height: 10%; 
 
    width: 100%; 
 
    background-color: yellow; 
 
}  
 

 
#footer { 
 
    position: relative; 
 
    height: 10%; 
 
    width: 100%; 
 
    background-color: lightgray; 
 
} 
 

 
#container { 
 
    height: 80%; 
 
    width: 100vw; 
 
    background-color: red; 
 
     
 

 
    background-image: url(http://clockworkmoggy.com/wp-content/uploads/image00.png); 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 

 
}  
 

 
#imagewrap{ 
 
    position: absolute; 
 
    border: 1px solid #818181; 
 
    z-index: 2; 
 
    height: 75%; 
 
    display: block; 
 
    margin: 0 auto; 
 
}

<div id="header"> 
 
    </div> 
 

 
     <div id="container"> 
 

 
     <div id="imagewrap"> 
 
     
 
     </div> 
 

 
     </div> 
 

 
    <div id="footer"> 
 
    </div>

Answer 4

只是删除margin:0 auto;和#imagewrap更换text-align: center;。它会工作！ 检查下面的JSFiddle代码以供参考。

html, body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    height: 100vh;  
 
} 
 

 
#header { 
 
    position: relative; 
 
    height: 10%; 
 
    width: 100%; 
 
    background-color: yellow; 
 
}  
 

 
#footer { 
 
    position: relative; 
 
    height: 10%; 
 
    width: 100%; 
 
    background-color: lightgray; 
 
} 
 

 
#container { 
 
    height: 80%; 
 
    width: 100vw; 
 
    background-color: red; 
 
}  
 

 
#imagewrap{ 
 
    
 
    border: 1px solid #818181; 
 
    z-index: 2; 
 
    height: 75%; 
 
    display: block; 
 
    text-align: center; 
 
}

<body>  
 
     <div id="header"> </div>  
 
     <div id="container">  
 
     <div id="imagewrap"> 
 
     <img src="https://assets.servedby-buysellads.com/p/manage/asset/id/29708" height="100%" id="front" /> 
 
     </div>  
 
     </div>  
 
     <div id="footer"> </div> 
 
    </body>

JSFiddle Demo