如何让我的 div 完全居中？

Question

我是网络开发的新手，我正在为我的朋友制作一个网站。我想要做的就是将他们的封面放在他们的 soundcloud 播放列表上，并让这两个 div 大小相同，并在页面上垂直和水平居中。我搜索了 google 和 Whosebug，但 none 的答案对我有用。 div 继续显示在页面的右下角。我似乎无法做到正确。

   
    #playlist {
   position: absolute;
   top:50%;
   left:50%;
   width:500px;
    height:500px;
    margin-top: -250px
    margin-left: -250px;
    z-index:1;
    margin: 0 auto;
}

 #artwork {
  position:absolute;
  top:50%;
  left:50%;
  width:500px;
    height:500px;
    margin-top:-250px;
    margin-left -250px;
  z-index:2;
  margin: 0 auto;
        background-color:red; /*only to show hover*/ 
 
}

 #artwork:hover {
 opacity:0;
}

 #container{
 
   position: relative;
     height:500px;
     width:500px;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
}

<!doctype html>
<html>
  <head>
    <title>VOUDOUX</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>

  <body style="background-color:black">

    <div id="container">

  <div id="playlist">

      <iframe width="100%" height="100%" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/125549903&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>
    
  </div>

  <div id="artwork"><img src="images/Vices2.jpg" alt="coverart" style="width:100%;height:100%;"></div>


    </div>

  </body>
</html>

Answer 1

添加 CSS 属性: 文本对齐：居中；到 div

Answer 2

你的意思是这样的吗？

body {
  position: relative;
}

#wrap {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 0 auto;
  background: green;
}


#playlist {
   position: absolute;
   top:0;
   left:0;
   width:200px;
    height:200px;
    z-index:1;
    margin: 0 auto;
}

 #artwork {
  position:absolute;
  top:0;
  left:0;
  width:200px;
    height:200px;
  z-index:2;
  margin: 0 auto;
        background-color:red; /*only to show hover*/ 
 
}

 #artwork:hover {
 opacity:0;
}

 #container{
  margin: 0 auto;
 position: relative;
  width: 200px;
  height: 200px;
  top: 50%;
  transform: translateY(-50%);

}

<body style="background-color:black">

<div id='wrap'>  
<div id="container">

  <div id="playlist">

      <iframe width="100%" height="100%" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/125549903&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>
    
  </div>

  <div id="artwork"><img src="images/Vices2.jpg" alt="coverart" style="width:100%;height:100%;"></div>


</div>
  </div>
</body>

Answer 3

基于 Daniel D 的回答和您对他的回答的评论。

我已经从 #playlist 和 #artwork 中删除了 margin: 0 auto 以支持：

top: 50%; 
left: 50%; 
transform: translateX(-50%) translateY(-50%);

另外，通过将 #container 设置为 100% width 和 body 的 height，您可以将播放列表和插图元素置于整个页面的中心。别忘了设置html,body的width和min-height不然#container就不知道占100%了！

要查看最佳结果，您需要运行全页模式下的代码段。

#playlist {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 500px;
  z-index: 1;
  transform: translateX(-50%) translateY(-50%);
}
#artwork {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 500px;
  z-index: 2;
  transform: translateX(-50%) translateY(-50%);
  background-color: red;
  /*only to show hover*/
}
#artwork:hover {
  opacity: 0;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}
#container {
  position: relative;
  width: 100%;
  height: 100%;
}

<body style="background-color:black">

  <div id="container">

    <div id="playlist">

      <iframe width="100%" height="100%" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/125549903&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>

    </div>

    <div id="artwork">
      <img src="images/Vices2.jpg" alt="coverart" style="width:100%;height:100%;">
    </div>


  </div>

</body>

如何让我的 div 完全居中？

How do I get my divs to be exactly centered?

html

css

center

centering