display: flex для элемента body - HTML и CSS

macdack · 14.05.2015, 19:47

вот так пытаюсь с помошью флексбокса отцентрировать элемент в теле документа:

не получается:

Код HTML:

<!DOCTYPE HTML><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>html6</title>


<style type="text/css" id="">

body 
   {
   display:flex; 
   justify-content:center;
   align-items:center;  
   background: black;
   }

#div
   {
   width:200px;
   height:200px;
   background:silver;

   }


</style>
</head>
<body>



<div id="div"></div>



</body>
</html>

как отцентрировать один элемент в теле документа ?
то есть какое бы ни был размером элемент body - вложеный элемент центрируется

Wicort · 15.05.2015, 15:27

Вы имеете ввиду то, что у Вас не по центру экрана в данном случае? Если да, то по-умолчанию body имеет высоту, равную суммарной высоте контента (грубо говоря). В Вашем случае - высоту серого квадрата - 200px. Body - тоже.
Попробуйте дополнительно прописать

Код HTML:

html 
   {
   height:100%;
   }

и, соответственно, в body тоже добавить высоту

Код HTML:

body 
   {
   display:flex; 
   justify-content:center;
   align-items:center;  
   background: black;
   height: 100%;
   }

Stanislav · 15.05.2015, 23:04

что то как то мутно... ну все же наугад отвечу... margin: 0 auto;

Naive · 16.05.2015, 11:29

Цитата:

Сообщение от Stanislav

что то как то мутно... ну все же наугад отвечу... margin: 0 auto;

тут то это причем? По горизонтали он уже отцентровал флексом. Для центровки по вертикали не хватало высоты окна, что и подсказал Wicort.
Автоматический марджин — абсолютно другой метод центровки и только по горизонтали.
upd: Хотя вру, есть вариант центровки с абсолютным позиционированием и автоматическим марджином для заданных размеров блока.

14.05.2015, 19:47	#1
macdack Пользователь Регистрация: 16.03.2010 Сообщений: 16	display: flex для элемента body вот так пытаюсь с помошью флексбокса отцентрировать элемент в теле документа: не получается: Код HTML: <!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <title>html6</title> <style type="text/css" id=""> body { display:flex; justify-content:center; align-items:center; background: black; } #div { width:200px; height:200px; background:silver; } </style> </head> <body> <div id="div"></div> </body> </html> как отцентрировать один элемент в теле документа ? то есть какое бы ни был размером элемент body - вложеный элемент центрируется

15.05.2015, 15:27	#2
Wicort Форумчанин Регистрация: 04.08.2009 Сообщений: 684	Вы имеете ввиду то, что у Вас не по центру экрана в данном случае? Если да, то по-умолчанию body имеет высоту, равную суммарной высоте контента (грубо говоря). В Вашем случае - высоту серого квадрата - 200px. Body - тоже. Попробуйте дополнительно прописать Код HTML: html { height:100%; } и, соответственно, в body тоже добавить высоту Код HTML: body { display:flex; justify-content:center; align-items:center; background: black; height: 100%; } Еслия Вам помог, не поленитесь нажать на весы и оставить отзыв. Это не займет много времени, но даст понять, что я старался не зря =) Мой ник зарегистрирован, а твой?

15.05.2015, 23:04	#3
Stanislav Квадрокоптерист Участник клуба Подтвердите свой е-майл Регистрация: 29.09.2007 Сообщений: 1,824	что то как то мутно... ну все же наугад отвечу... margin: 0 auto; Я часть той силы, что вечно хочет зла, но вечно совершает благо..

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
переписать код с++ для flex	laovai	Помощь студентам	0	13.03.2015 09:41
background для body не заливает всю страницу, только видумую область	dem66	HTML и CSS	2	21.07.2013 12:46
Конструктор,метод вывода на экран Display, метод для преобразования в строку toString в Delphi	Чумак Татьяна	Помощь студентам	6	03.04.2012 11:58
hex->display (для загрузчика)	Lord_Rey	Assembler - Ассемблер (FASM, MASM, WASM, NASM, GoASM, Gas, RosAsm, HLA) и не рекомендуем TASM	0	23.12.2010 22:39
Два background'а для body (слева и справа от контента)?	alex2406	HTML и CSS	7	14.06.2010 16:34