Why can I not center horizontally a child element using mx-auto?

Question

I am trying to center horizontally a button. This button is in a container which already centers itself using margin-left:auto and margin-right:auto.

unfortunately I cannot do the same for the button inside this container which would have been easier because I could have used one class for the container and the button.

I am using Tailwind classes for my project and the mx-auto class which is margin-left:auto AND margin-right:auto works for the container but not the button hence this question. Why can I not use that class for my button ?

.container {
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
  background-color: yellow;
  height: 92px;
}

.btn {
  margin-left: auto;
  margin-right: auto;
 /* display: table;
  margin: 0 auto;*/
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="output.css">
    <title>This is the title of the webpage!</title>
  </head>
  <body>
      <div class="container">      
            <button class="btn">boutton</button>        
      </div>
  </body>
</html>

score 2 · Answer 1 · edited Jun 11 '23 at 17:33

If you are trying to align the button in the center of your container, you must first tell the element how to display before it can rely on margin-left: auto; or margin-right: auto;. For this specific application to achieve a centered button, I would do as follows:

.container {
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
  background-color: yellow;
  height: 92px;
}

.btn {
  margin-left: auto;
  margin-right: auto;
  display: flex;  /*Using CSS to give the container the ability to alter its items' width/height // Hence - margin: auto now works properly.*/
/*display: table; Using a display: table; would really only apply if you were using a table structure in your HTML*/
  margin: 0 auto;  
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="output.css">
    <title>This is the title of the webpage!</title>
  </head>
  <body>
      <div class="container">      
            <button class="btn">boutton</button>        
      </div>
  </body>
</html>

@ElsaKarami The button (in this answer is right) because it is centered horizontally as the OP wanted. — Kevin M. Mansour, Sep 14 '21 at 20:29
[Comments in CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/Comments) are written with `/* Comment */`. The `` works only in HTML. — Kevin M. Mansour, Sep 14 '21 at 20:36

score 2 · Accepted Answer · answered Sep 13 '21 at 15:34

Because the button has display: inline-block, it's not about how tailwind works. you can change the button's display to block or add block to its class (tailwind). for more info about this checkout this answer

Alternatively, you can set the parent's display to flex and center button vertically and horizontally by justify-content: center and align-items: center

ElsaKarami · Answer 3 · 2021-09-15T04:47:12.423

mx-auto class for horizontally centering fixed-width block-level content that is, content that has display: block and a width set—by setting the horizontal margins to auto. you can use flex-box to center the height. and finally you can omitted margin-left: auto; margin-right: auto; from the .btn class

.container {
  max-width: 550px;
  display: flex;
  justify-content: center;
  background-color: yellow;
  height: 92px;
}

Why can I not center horizontally a child element using mx-auto?

3 Answers3