0

I created a simple example to showcase the idea of having an absolutely positioned element with left and right set to 0 but with very different results in latest Chrome and Safari. Based on the comments to this question and this answer, I would think it would work consistently based on how it's outlined in the CSS spec, but it doesn't. Why is this the case?

I'm aware that setting a specific width will resolve, but 1) why the difference cross-browser, and 2) is there a better way to center than specifying explicit width?

<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
         .vis {
         width: 100%;
         position: relative;
         }
         .btn {
         position: absolute;
         left: 0;
         right: 0;
         margin:auto;
         display:block;
         }
      </style>
      <title>Document</title>
   </head>
   <body>
      <div class="vis">
         <button class="btn">Test!</button>
      </div>
   </body>
</html>

Safari: enter image description here

Chrome: enter image description here

rb612
  • 5,280
  • 3
  • 30
  • 68
  • because you are using button element and it's a *special* element. If you use div or span you will see the same behavior (the last one) – Temani Afif Mar 18 '20 at 01:30
  • Is there any property of the button element itself that makes it special? I thought maybe changing to a block-level element would fix it so it would behave like a `div` but as seen in the example that didn't change. – rb612 Mar 18 '20 at 01:32
  • The concept of button itself is something special. It's a bit tricky but you cannot do what you want with buttons. You cannot for example change the display like you want: https://stackoverflow.com/q/27605390/8620333 / https://stackoverflow.com/q/35464067/8620333 – Temani Afif Mar 18 '20 at 01:35

0 Answers0