divを正確に中央に配置するにはどうすればよいですか？

私はウェブ開発には新しく、私は友人のためのウェブサイトを作っています。私がしたいのは、サウンドクラウドのプレイリストにカバーアートを持ち、これらのdivの両方を同じサイズにして、ページ上で縦と横の中央に配置することです。私はすべてのGoogleと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

。私は賛成の両方#playlistと#artworkからmargin: 0 autoを削除した

：設定することによって、また

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

#container％widthとのheight 100から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

これはどういう意味ですか？ダニエルD'sの答えと彼の答えにあなたのコメントのオフに基づいて

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を正確に中央に配置するにはどうすればよいですか？

答えて

関連する問題