Как расположить Div по центру при помощи margin?

191

08 июля 2018, 23:20

Всем привет! Хочу сделать окошко по центру (очень заезжанная тема), но при помощи margin'а не получается(. Я гуглил, ничего путного не нагуглил... Помогите, пожааалуйста :)! Вот код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
	<head> 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
		<title>Window In Center</title> 
		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 
		<style type="text/css"> 
			* {margin: 0; padding: 0;} 
 
			html {width: 100%; height: 100%;} 
 
			body {background-color: #e6e6e6;} 
 
			.main_window { 
				background-color: #FFFFFF; 
				margin: 0 auto; 
			} 
 
		</style> 
 	</head> 
 	<body> 
   		<div class="main_window"><p>Просто текст</p></div> 
 	</body> 
</html>

Answer 1

Ход мысли в целом правильный, только <div> блочный элемент и по умолчанию занимает 100% ширины родителя. Для того, чтобы выровнять его по центру нужно ограничить его ширину.

* { 
  margin: 0; 
  padding: 0; 
} 
 
html { 
  width: 100%; 
  height: 100%; 
} 
 
body { 
  background-color: #e6e6e6; 
} 
 
.main_window { 
  background-color: #FFFFFF; 
  margin: 0 auto; 
  max-width:300px; 
}

<div class="main_window"> 
  <p>Просто текст</p> 
</div>

Answer 2

Собственно я в одном примере Вам показал два способа позиционирования

1) с помощью flexbox

2) абсолютное позиционирование

* { 
  margin: 0; 
  padding: 0; 
} 
 
html, 
body { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  width: 100%; 
  height: 100%; 
} 
 
.wrapper { 
  width: 30vw; 
  height: 30vw; 
  position: relative; 
  background: #ccc; 
} 
 
.center { 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  width: 100px; 
  height: 100px; 
  text-align: center; 
  line-height: 100px; 
  outline:1px solid red; 
}

<div class="wrapper"> 
  <div class="center">center</div> 
</div>

Создание сайта для дропшиппинга в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как плавно изменить размер картинки в блоке?

Продолжаю учиться верстке и хочу сделать такую штуку:

217

HTML

Почему не срабатывает событие onfullscreenchange при нажатии F11?

Такой код реагирует на requestFullscreen и cancelFullScreen, но если нажимать F11 консоль остается пустой

167

HTML

Как раскрывать сайдбар на нужной мне странице

Есть некий каталог товаров с подкатегориямКаталог раскрываются при клике

219

HTML

Откуда серая линия между блоками?

Иногда появляется серая линия между 2 блокамиПри увеличении и уменьшении масштаба она исчезает

182