不能水平對齊按鈕

Question

我很難讓按鈕在我的div中居中。我可以讓它左對齊，但是當我對齊它時，它會右移。當我對齊它時，它對齊通過容器。

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

試試這個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; 
} 

Answer 2

U必須嘗試將按鈕移動到中心的過程。例如絕對位置，上/左50％，翻譯-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"> 
 
\t \t </span> 
 
      </a> 
 
     </div> 
 
     <div class="back-title">Jane Doe</div> 
 
     <div class="role">CEO</div> 
 

 

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

Answer 3

嘗試使用此代碼

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); 
} 

我真的不知道白色容器的寬度，所以它更像是一個受到打擊和基於試驗的分流，但邏輯是你增加了50％的邊界t o容器，然後減去contanier寬度的一半，然後將它放置在中心。

語法：

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