Center a div more intelligently with CSS

Question

I'm centering an object with the following code:

.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;
}

I'm using margin top and left to subtract the half of the object size but that size is given as a percentage. So my question is there is a way to assign these margins So that I don't have to change them manually every time I change the box size?

You can use % in margin-top and margin-left, you can see it working here. https://www.w3schools.com/cssref/playit.asp?filename=playcss_margin-top&preval=10%25 — Dragomir Kolev, Aug 09 '17 at 15:49
you could write some jQuery to calculate these amounts for you. — Our_Benefactors, Aug 09 '17 at 15:52

score 3 · Answer 1 · answered Aug 09 '17 at 16:01

To me, best option you have is to use the transform:translate property.

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

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

No need ta calculate the width/2 and height/2 margin anymore.

And if you're using SASS, here is a magic @mixin to use :

@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%));
  }
}

Then, simply use

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

   // only vertical
   @include center(vertical);

   // only horizontal
   @include center(horizontal);
}

Thanks for the mixin, definitely stealing this. – Lansana Camara Aug 09 '17 at 16:06 — Lansana Camara, Aug 09 '17 at 16:06
You're welcome. Considers it as a gift :) – Alexis Wollseifen Aug 09 '17 at 16:08 — Alexis Wollseifen, Aug 09 '17 at 16:08

kyun · Answer 2 · 2017-08-09T15:51:54.773

2

You should use 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;
}

edited Aug 09 '17 at 15:51

answered Aug 09 '17 at 15:49

kyun

9,710
9
31
66

Yes.. It's just error.. I fixed. – kyun Aug 09 '17 at 15:53
1

I would show a link browser support for FlexBox. Not all browsers accept it, and it may be misleading to some users that implement it in a site thinking it will work everywhere, and have it break for many users that use unsupported browsers. – Lansana Camara Aug 09 '17 at 15:54

score 2 · Answer 3 · answered Aug 09 '17 at 15:51

One of the many ways - use transform property to center the element - see demo below:

.object {
  width: 70%;
  height: 70%;
  position: absolute;
  top: 50%;
  left:50%;
  border: 1px solid red;
  transform:translate(-50%, -50%);
}

<div class="object">Two</div>

score 0 · Answer 4 · answered Aug 09 '17 at 15:54

.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>

Hope this helps.

score 0 · Answer 5 · answered Aug 09 '17 at 16:02

0

Why not use 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/

answered Aug 09 '17 at 16:02

the_lorem_ipsum_guy

452
1
12
27

Center a div more intelligently with CSS

5 Answers5