如何讓我的div完全居中？

我是網絡開發新手，我正在爲我的朋友製作一個網站。我想要做的是將他們的coverart放在他們的soundcloud播放列表上，並且這兩個div的大小相同，並且在頁面上垂直和水平居中。我搜索了谷歌和stackoverflow的所有，但沒有答案一直爲我工作。 div繼續顯示在頁面的右下角。我似乎無法做到。如何讓我的div完全居中？


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

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

 
\t #artwork:hover { 
 
\t opacity:0; 
 
} 
 

 
\t #container{ 
 
\t 
 
    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"> 
 

 
\t \t <div id="playlist"> 
 

 
    \t \t <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> 
 
    
 
\t \t </div> 
 

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

 

 
    </div> 
 

 
    </body> 
 
</html>

來源

2016-09-13 Tre' Davis

基於關閉丹尼爾·D的答案，並以他的回答您的評論的。

我已經去除了來自#playlist和#artwork的margin: 0 auto贊成：通過設置

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

而且#container至100％width和height的body可以居中整個內部播放列表和藝術品元素頁。不要忘記設置width和min-height的html,body或#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>

來源

2016-09-13 20:19:31

非常翔實！這正是我需要的！ –

添加CSS屬性：文本對齊：中心; 到分區

來源

2016-09-13 19:43:25 alexm

你的意思是這樣的嗎？

body { 
 
    position: relative; 
 
} 
 

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

 

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

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

 
\t #artwork:hover { 
 
\t opacity:0; 
 
} 
 

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

 
}

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

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

 
\t \t <div id="playlist"> 
 

 
    \t \t <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> 
 
    
 
\t \t </div> 
 

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

 

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

來源

2016-09-13 19:52:13

是的！我只是需要它垂直居中，還包括水平居中。 –

好的。讓我在那裏工作。 –

@T。兒童。好吧，我更新了我的答案和一些代碼。嘗試這個。 –

如何讓我的div完全居中？

回答

相關問題