Div is not centered when setting the width to 50%

Question

when I center my div, it's not centered. It seems, that his left corner is right in the middle of the screen. How can I substract the half of my width to this, that my div gets centered correctly?

In my css I write left: 50% and this is the result:

are there any possibilities to center this div correctly?

http://stackoverflow.com/a/33516464/4305494 .. this has been asked many times, please do some research before posting a question. — Ricky Ruiz, May 09 '17 at 19:51

score 5 · Accepted Answer · answered May 09 '17 at 19:42

5

transform: translateX(-50%) will shift the element to the left 50% of it's own width. paired with left: 50%, it will center something on the x-axis.

answered May 09 '17 at 19:42

Michael Coker

52,626
5
64
64

score 1 · Answer 2 · answered May 09 '17 at 19:45

1

And to extend Michael Coker's answer:

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

Will shift the element horizontally and vertically by half of it's width/height.

answered May 09 '17 at 19:45

DrMcCleod

3,865
1
15
24

score 0 · Answer 3 · answered May 10 '17 at 07:15

This is another logic which worked for me to align the div in center

  var divWidth = $(".center").width();
  var rowWidth = $(".row").width();
  var a = (rowWidth - divWidth) / 2;
  $(".center").css("margin-left", a);

.center {
  background-color: green;
  height: 60px;
  text-align: center;
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>

<body>
  <div class="row">
  </div>
  <div class="center" style="width:50%">
    Hello World
  </div>
</body>

</html>

Div is not centered when setting the width to 50%

3 Answers3