Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

根据Daniel D的回答以及你对他回答的评论。

我已从margin: 0 auto和#playlist移除了#artwork，转而支持：

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

另外，通过将#container设置为width的100％height和body，您可以将整个页面中的播放列表和艺术作品元素置于中心位置。不要忘记设置width的{{1}}和min-height或html,body将不知道该占用100％的费用！

要查看以全页模式运行代码段所需的最佳结果。

#container

#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%;
}

Answer 2

添加CSS属性： text-align：center; 到div

Answer 3

你的意思是这样吗？

＆＃13;

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%);

}

＆＃13;

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

＆＃13;

如何让我的div完全居中？

3 个答案: