Can't Horizontally Align Button

Question

I'm having a hard time getting a button to center in my div. I can get it to align left, but when I align it center it is shifted right. When i align it right it aligns past the container.

https://jsfiddle.net/u0dn2onv/

HTML

    <div class="flip-container" ontouchstart="this.classList.toggle('focus');">
  <div class="flipper">
    <div class="front">
    </div>
    <div class="back">
      <div class="centerize">

        <a href="#" class="button" data-featherlight="#bio-brian">Jane's Bio</a>
        <div class="socicon-style">
          <a href="imdb.com">
            <span class="socicon-imdb">
        </span>
          </a>
        </div>
        <div class="back-title">Jane Doe</div>
        <div class="role">CEO</div>


      </div>
    </div>
  </div>

CSS

.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
}

.flip-container:hover .flipper,
.flip-container.hover .flipper {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flip-container,
.front,
.back {
  width: 100%;
  min-height: 100%;
  max-width: 100%;
  max-height: 100%;
  height: 0;
  padding-bottom: 70%;
}

.flipper {
  -webkit-transition: 0.6s;
  -webkit-transform-style: preserve-3d;
  -moz-transition: 0.6s;
  -moz-transform-style: preserve-3d;
  -o-transition: 0.6s;
  -o-transform-style: preserve-3d;
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}

.front,
.back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 100;
}

.front {
  background: url(http://pghpeople.com/wordpress/wp-content/uploads/2014/01/pittsburgh_headshot_f01a.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  background: #bd2d2c;
}

.socicon-style {
  :link {
    color: #fff;
  }
  :hover {
    color: #ebebeb;
  }
  text-decoration:none;
  font-size: 3em;
  position: absolute;
  bottom: 6%;
  left: 0%;
  right: 0%;
  text-align: center;
}

.back-title {
  color: #fff;
  font-size: 2em;
  position: absolute;
  top: 14%;
  left: 0%;
  right: 0%;
  text-align: center;
}

.role {
  color: #fff;
  font-size: 1.5em;
  position: absolute;
  top: 30%;
  left: 0%;
  right: 0%;
  text-align: center;
}

.button {
  border: none;
  padding: 1em 2em;
  text-decoration: none;
  position: absolute;
  font-size: .9em;
  -webkit-transition-duration: 0.2s;
  /* Safari */
  transition-duration: 0.2s;
  cursor: pointer;
  font-family: proxima-nova;
  font-weight: 600;
  letter-spacing: .1em;
  border-radius: .2em;
  top: 50%;
}

.centerize {
  text-align: right;
}

.button {
  background-color: white;
  color: #bd2d2c !important;
  text-transform: uppercase;
  text-decoration: none;
}

.button:hover {
  background-color: rgba(255, 255, 255, .9);
  color: rgba(189, 45, 44, 1);
  text-decoration: none;
}

Answer 1

Try using this code

https://jsfiddle.net/u0dn2onv/5/

.button {
  border: none;
  padding: 1em 2em;
  text-decoration: none;
  position: absolute;
  font-size: .9em;
  -webkit-transition-duration: 0.2s;
  /* Safari */
  transition-duration: 0.2s;
  cursor: pointer;
  font-family: proxima-nova;
  font-weight: 600;
  letter-spacing: .1em;
  border-radius: .2em;
  top: 50%;
}

.centerize {
  margin: calc(50% - 70px); 
}

I don't actually know the width of the white container so it was more of a hit and trial based claculation but the logic is that you add 50% margin to the container and then subtract half the width of the contanier so then it will be placed at the center.

syntax :

 margin:clac(50% - **half the width of the conatiner**);

Answer 2

U must try something process for move the button to center. For example position absolute, top/left 50%, translate -50%

.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
}

.flip-container:hover .flipper,
.flip-container.hover .flipper {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flip-container,
.front,
.back {
  width: 100%;
  min-height: 100%;
  max-width: 100%;
  max-height: 100%;
  height: 0;
  padding-bottom: 70%;
}

.flipper {
  -webkit-transition: 0.6s;
  -webkit-transform-style: preserve-3d;
  -moz-transition: 0.6s;
  -moz-transform-style: preserve-3d;
  -o-transition: 0.6s;
  -o-transform-style: preserve-3d;
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}

.front,
.back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 100;
}

.front {
  background: url(http://pghpeople.com/wordpress/wp-content/uploads/2014/01/pittsburgh_headshot_f01a.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  background: #bd2d2c;
}

.socicon-style {
  :link {
    color: #fff;
  }
  :hover {
    color: #ebebeb;
  }
  text-decoration:none;
  font-size: 3em;
  position: absolute;
  bottom: 6%;
  left: 0%;
  right: 0%;
  text-align: center;
}

.back-title {
  color: #fff;
  font-size: 2em;
  position: absolute;
  top: 14%;
  left: 0%;
  right: 0%;
  text-align: center;
}

.role {
  color: #fff;
  font-size: 1.5em;
  position: absolute;
  top: 30%;
  left: 0%;
  right: 0%;
  text-align: center;
}

.button {
  border: none;
  padding: 1em 2em;
  text-decoration: none;
  font-size: .9em;
  -webkit-transition-duration: 0.2s;
  /* Safari */
  transition-duration: 0.2s;
  cursor: pointer;
  font-family: proxima-nova;
  font-weight: 600;
  letter-spacing: .1em;
  border-radius: .2em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.centerize {
  text-align: right;
  display: flex;
}

.button {
  background-color: white;
  color: #bd2d2c !important;
  text-transform: uppercase;
  text-decoration: none;
}

.button:hover {
  background-color: rgba(255, 255, 255, .9);
  color: rgba(189, 45, 44, 1);
  text-decoration: none;
}

<div class="flip-container" ontouchstart="this.classList.toggle('focus');">
  <div class="flipper">
    <div class="front">
    </div>
    <div class="back">
      <div class="centerize">

        <a href="#" class="button" data-featherlight="#bio-brian">Jane's Bio</a>
        <div class="socicon-style">
          <a href="imdb.com">
            <span class="socicon-imdb">
		</span>
          </a>
        </div>
        <div class="back-title">Jane Doe</div>
        <div class="role">CEO</div>


      </div>
    </div>
  </div>

Answer 3

try this https://jsfiddle.net/u0dn2onv/1/

.button {
    border: medium none;
    border-radius: 0.2em;
    cursor: pointer;
    font-family: proxima-nova;
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 1em 2em;
    text-decoration: none;
    transition-duration: 0.2s;
}

.centerize {
    margin-top: 25px;
    text-align: center;
}