Style "bottom:0" also aligns to left

Question

I've set bottom:0 to a div to align it at the bottom. But, even if my text is text-center it is align to the left. I would like to know why?

.box {
  width: 100%;
}
.box:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 7%;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-4">
  <a href="#" class="thumbnail">
    <div class="box">
      <div class="content">
        <div>
          <img src="http://placehold.it/350x150" alt="Title" class="img-responsive center-block">
        </div>
        <div class="caption" style="position:absolute;bottom:0;">
          <p class="text-center">Title</p>
        </div>
      </div>
    </div>
  </a>
</div>

Answer 1

The parent div should have a width set to 100% of the page width then the child p element will align itself to center of the page.

In your current snippet there is no width of the div element set thats is why its taking the width of its child element content.

Still it will be a little off from center due to the padding applied using the class content.

You should apply this padding only for the image container div.

.box {
  width: 100%;
}
.box:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.padding7 {
  padding: 7%;
}
.caption {
  position: absolute;
  bottom: 0;
  width: 100%
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-4">
  <a href="#" class="thumbnail">
    <div class="box">
      <div class="content">
        <div class="padding7">
          <img src="http://placehold.it/350x150" alt="Title" class="img-responsive center-block">
        </div>
        <div class="caption">
          <p class="text-center">Title</p>
        </div>
      </div>
    </div>
  </a>
</div>