Центрируйте div более разумно с помощью CSS

Я центрирую объект с помощью следующего кода:

.object {
  width: 70%;
  height: 70%;
  position: absolute;
  top: 50%;
  left:50%;

  /* these are the lines to which I will refer */
  margin-top: -350px;
  margin-left: -350px;
}

Я использую поля сверху и слева, чтобы вычесть половину размера объекта, но этот размер указан в процентах. Итак, мой вопрос: есть ли способ назначить эти поля, чтобы мне не приходилось менять их вручную каждый раз, когда я меняю размер ящика?

Источник

5 ответов

Для меня лучший вариант - использовать transform:translate имущество.

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

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

Не нужно рассчитывать width/2 а также height/2 маржа больше.

И если вы используете SASSвот волшебное @mixin для использования:

@mixin transform($transforms) {
   -moz-transform: $transforms;
   -o-transform: $transforms;
   -ms-transform: $transforms;
   -webkit-transform: $transforms;
   transform: $transforms;
}

@mixin center($position: "both") {
  position: absolute;

  @if $position == "vertical" {
    top: 50%;
    @include transform(translateY(-50%));
  }

  @if $position == "horizontal" {
    left: 50%;
    @include transform(translateX(-50%));
  }

  @if $position == "both" {
    top: 50%;
    left: 50%;
    @include transform(translate(-50%, -50%));
  }
}

Затем просто используйте

.object {
   // both vertical and horizontal
   @include center;

   // only vertical
   @include center(vertical);

   // only horizontal
   @include center(horizontal);
}
Источник

Один из многих способов - использовать transform свойство для центрирования элемента - см. демо ниже:

.object {
  width: 70%;
  height: 70%;
  position: absolute;
  top: 50%;
  left:50%;
  border: 1px solid red;
  transform:translate(-50%, -50%);
}
<div class="object">Two</div>

Источник

Вы должны использовать flex.

HTML

<body>
    <div class="square"></div>
</body>

CSS

body{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.square{
  width: 200px;
  height: 200px;
  background-color: red;
}
Источник

Почему бы не использовать margin: 0 auto?

.object {
  width: 70%;
  height: 70%;
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:0 auto;
}

https://jsfiddle.net/p9hy06tg/4/

Источник 

.main_div{
  width:200px;
  height:200px;
  border:thin black solid;
  position:relative;
}

.main_div .object {
  width: 70%;
  height: 70%;
  position: absolute;
  transform:translate(-50%, -50%);
  top: 50%;
  left:50%;
  border: thin red solid;
  
}
<div class="main_div">
  <div class="object">Object Div Text</div>
</div>

Надеюсь это поможет.

Источник
Другие вопросы по тегам