图像不使用 css 居中答案

【问题标题】：image not centering using css图像不使用 css 居中
【发布时间】：2017-07-17 22:09:51
【问题描述】：

这里是新手问题。努力学习基础知识。我有一个带有页眉、页脚和容器的简单页面。在那个容器中，我想要一个图像，并且我希望它居中。使用 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>

【问题讨论】：

这是因为你已经完全放置了你的 imagewrap - 你需要给它left:50%; transform:translateX(-50%);

标签： html css margin centering

【解决方案1】：

jsfiddle

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

只需删除margin:0 auto; 并将text-align: center; 替换为#imagewrap。它会工作的！检查下面的 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

【讨论】：