如何让我的 div 完全居中？答案

【问题标题】：How do I get my divs to be exactly centered?如何让我的 div 完全居中？
【发布时间】：2017-01-21 12:19:58
【问题描述】：

我是网络开发的新手，我正在为我的朋友制作一个网站。我想要做的就是将他们的封面放在他们的 soundcloud 播放列表上，并让这两个 div 的大小相同，并在页面上垂直和水平居中。我已经在 google 和 stackoverflow 上进行了搜索，但没有一个答案对我有用。 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>

【问题讨论】：

标签： html css center centering

【解决方案1】：

根据 Daniel D 的回答和您对他的回答的评论。

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

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

此外，通过将#container 设置为body 的width 和height 的100%，您可以在整个页面中居中播放列表和插图元素。不要忘记设置html,body 或#container 的width 和min-height 将不知道要占用100% 的内容！

要查看最佳结果，您需要在全页模式下运行 sn-p。

#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>

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

你的意思是这样的吗？

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>

【讨论】：

是的！我只需要它垂直居中也包括水平居中。
@T.孩子。好的，我更新了我的答案和一些代码。试试这个。