Как пользоваться функцией culc()?

Question

[freeman0204]

Есть такой код codepen.io/anon/pen/bVGyve . Нужно поставить div class="box" например слева по центру. Какую прописать формулу в culc() что бы вычесть высоту, как я понимаю box и что бы он стал по центру?

Answer 1

[Rithmsamba]

Зачем вам тут calc()?
добавтье к .box
margin-top: -10px

Ну или transform: translateY(-50%); используйте (если высота .box не известна)

Answer 2

[Дмитрий Кравченко]

top: calc(50% - 10px);
В этом случае больше подойдет transform: translateY(-50%)

Comments

[freeman0204]

Почему 10 px? Высоте же 20px.
transform: translateY(-50%) сужает квадрат и выравнивает в левый угол. А даже если высота не известна, как написали ниже, то вообще не работает.

[Rithmsamba]

Потому что вам надо поставить блок в середину, значит его высоту делим пополам и поднимаем блок на это значение

[Дмитрий Кравченко]

Почему 10 px? - чтоб отступ сделать меньше половины( 50% ) на половину высоты (20px/2 = 10px)
transform: translateY(-50%) поднимет элемент на половину ЕГО СОБСТВЕННОЙ высоты, что нам и нужно

Answer 3

[AdNahim]

Ну или так тоже вариант:

<div class="container">
    <div class="box"></div>
  </div>

.container {
  position: relative;
  display: block;
  float: left;
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 0 1.5%;
  text-align: center;
}


.box {
  position: absolute;
  bottom: 0px;
  top: 0px;
  right: 0px;
  left: 0px;
  margin: auto;
  width: 20px;
  height: 20px;
  background-color: #c2c;
}