How to center horizontally an absolute button in a div?

Question

I am trying to center an absolute button in a div (in the bottom), but it seems to not be working.. Here's what I'm doing for now:

.mc-item {
  background: #F0F0F0;
  border: 1px solid #DDD;
  height: 140px;
  padding: 20px;
}

.mc-item a {
  position: absolute;
  bottom: -19px;
  left: 50%;
}

.mc-item p {
  text-align: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="col-md-4 col-sm-12">
  <div class="mc-item">
    <p>Changez votre adresse email ou votre mot de passe.</p>
    <a asp-controller="MyAccount" asp-action="Settings" class="btn btn-primary">Paramètres</a>
  </div>
</div>

This gives the following result:

What I want is the button centered in the middle. Does the left: 50% takes in consideration the whole .col div? I tried wrap the button in a div and div's width becomes 380 which is the same as the .col div (not the div with the <p>).

score 8 · Accepted Answer · answered Mar 30 '18 at 13:44

8

Try to transform: translateX(-50%); your button

answered Mar 30 '18 at 13:44

Bastien Robert

809
1
10
31

Instead of what? Should I remove the `left: 50%` ? I replaced it and it goes out of the div (in the left). – Haytam Mar 30 '18 at 13:45
1

Nope, just add it to your button – Bastien Robert Mar 30 '18 at 13:45
1

It works perfectly, can you explain how did this fix the issue? – Haytam Mar 30 '18 at 13:46
The target of the `left` attribute is the left of the button, a translate takes the width of your button and it translate your button -50% of it width to the right, so 50% of the button width to the left – Bastien Robert Mar 30 '18 at 13:48

score 1 · Answer 2 · answered Mar 30 '18 at 13:47

Left:50% will make the element, start from center position of container. So the element is still not in center but Transform: translate(-50%,0) will move the element to the left of 50% of its width. So now the center of element meets the horizontal center of its container.

.mc-item {

  background: #F0F0F0;
  border: 1px solid #DDD;
  height: 140px;
  padding: 20px;
}

.mc-item a {
  position: absolute;
  bottom: -19px;
  left: 50%;
  transform: translate(-50%,0)
}

.mc-item p {
  text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-4 col-sm-12">
  <div class="mc-item">
    <p>Changez votre adresse email ou votre mot de passe.</p>
    <a asp-controller="MyAccount" asp-action="Settings" class="btn btn-primary">Paramètres</a>
  </div>
</div>

score 0 · Answer 3 · answered Mar 30 '18 at 13:46

.mc-item {
    background: #F0F0F0;
    border: 1px solid #DDD;
    height: 140px;
    padding: 20px;
    position: relative;
}

.mc-item a {
    position: absolute;
    bottom: -19px;
    left: 50%;
    transform: translateX(-50%);
}

.mc-item p {
    text-align: center;
}

How to center horizontally an absolute button in a div?

3 Answers3