图片未使用 css 居中

Question

这里是新手问题。努力学习基础知识。我有一个带有页眉、页脚和容器的简单页面。在那个容器中我想要一个图像，我希望它居中。使用 margin: 0 auto 没有这样做。我已经尝试明确地给容器一个宽度，但仍然没有用。谢谢

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

您可以将 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 2

jsfiddle

删除 position: absolute; 并将宽度添加到 imagewrap class .like 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 3

尝试为该容器设置背景图像并将其置于中心位置。请根据您的要求更改背景 url

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

图片未使用 css 居中

image not centering using css

html

css

margin

centering