Как получить, чтобы мои div были точно центрированы?

Я новичок в веб-разработке, и я делаю сайт для своего друга. Я хочу, чтобы у них был свой плакат по их плейлисту soundcloud и оба эти div были одинакового размера и центрированы по вертикали и горизонтали на странице. Я искал все google и stackoverflow, но ни один из ответов не работал на меня. Разделы продолжают отображаться в правом нижнем углу страницы. Кажется, я просто не понимаю.Как получить, чтобы мои 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

Основы ответа Daniel двойки и ваш комментарий к его ответу.

я удалил margin: 0 auto от обоих #playlist и #artwork в пользу:

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: выравнивания текста: центр; К div

источник

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 были точно центрированы?

ответ

Смежные вопросы