0

Probably it's relate to the fact that its position is absolute, but still how would you center an absolute positioned div ?

Using top, instead of margin-top works, but left instead of margin-left won't affect it. Why ?

.title
{
  display:block;
  position: absolute;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  height: 10%;
  top : 80%;
}




<div class="title fontHugeTitle2"><h1> The Best  In Town </h1></div>
Curnelious
  • 1
  • 16
  • 76
  • 150

2 Answers2

2

left: auto; right: auto won't work like margin: 0 auto for centering the div, but you have a fixed width and you can just set the left property to half of what's left e.g. left: 5%

Velimir Tchatchevsky
  • 2,812
  • 1
  • 16
  • 21
  • Thanks, I don't get you :) I understand what to do, but don't understand why its not working with left/right auto – Curnelious Apr 14 '19 at 02:06
  • Your solution works but why mine will not ? whats the logic behind ? – Curnelious Apr 14 '19 at 02:09
  • @Curnelious ´left:auto´ and ´right:auto´ is not for centering layer. They are for override existing positions. For example, if you want to animate layer size from left to it's actual size, first set ´left:0´ then set ´left:auto´ after an event. – Mehmet Otkun Apr 14 '19 at 02:22
  • @Curnelious as to the expected result, the docs say - 'When both left and right are defined, the position of the element is overspecified. When this is the case, the left value has precedence when the container is left-to-right (thus, the computed value of right is set to -left); the right value has precedence when the container is right-to-left (thus, the computed value of left is set to -right).' - https://developer.mozilla.org/en-US/docs/Web/CSS/left – Velimir Tchatchevsky Apr 14 '19 at 03:56
  • @VelimirTchatchevsky i didn't set left and right so the docs you just showed is not relevant. I did set them to be auto which by the docs should center the element. Still not sure why absolute element will not listen to them. – Curnelious Apr 14 '19 at 04:07
  • @Curnelious can you link the part of the docs you are referring to, I'm pretty sure that's only applicable to the margin property – Velimir Tchatchevsky Apr 14 '19 at 04:25
0

Add

div {
  width: 100%;
}

Change 

<div class="title fontHugeTitle2"><h1> The Best  In Town </h1></div>

To

<div class="fontHugeTitle2"><h1 class="title"> The Best  In Town </h1></div>
SimonB
  • 325
  • 4
  • 13