Как в html, css сделать элемент ровно по средине страницы?

Question

[theptashyts]

Надо код, который поставит элемент страницы (текст, картинку, ссылку и т.д.) в центр страницы по вертикали и гаризонтали. как тут: davegamache.com

Answer 1

[Aleksandr]

А слабо воспользоваться инспектом? Совсем обленились.
https://jsfiddle.net/fzbhp38z/

Comments

[theptashyts]

постараюсь поменяться.

Answer 2

[GreatRash]

Смотря конечно какие браузеры вас интересуют и опять же какая ситуация у вас на странице происходит. Ну а так...

.elem {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 300px;
  height: 300px;

  transform: translate(-50%, -50%);
}

.elem {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 300px;
  height: 300px;
  margin: -150px 0 0 -150px;
}

.elem_parent:before {
  display: inline-block;
  
  width: 1px;
  height: 100%;
  margin: 0 -0.3em 0 0;
  vertical-align: middle;
}

.elem {
  display: inline-block;

  width: 300px;
  height: 300px;
  vertical-align: middle;
}

Ну а ещё можно в браузере нажать F12 и посмотреть как там у них сделано.

Answer 3

[Daria]

Посмотрите исходный код, там все видно.

position: fixed;
left: 50%;
top: 50%;
margin-left: -168px; /*1/2 ширины блока*/
margin-top: -168px; /*1/2 высоты блока*/

Answer 4

[mr_dev1l]

есть несколько вариантов.
позиционировать абсолютно или использовать flex.
С помощью flex будет намного быстрее

#main-wrap {
width:100%;
height:100%;
display:flex;
}
.logo {
margin:auto;
}

Answer 5

[gleendo]

Нужному элементу прописываешь следующие стили:

position absolute
  left 0
  top 0
  right 0
  bottom 0
  margin auto
  width: значение;
  height: значение;

Answer 6

[madcore]

К родительскому элементу допиши

display: flex
align-items: center
justify-content: center
flex-direction: column

Comments

[DimaelVertigo]

Я тоже рекомендую пользоваться flex. Только с ";" в конце. Автор может не пользоваться sass-синтаксисом.