CSSで水平方向の中央ボタン

Question

私はHTMLとCSSを学習しており、<div>のボタンを中央に配置するのが困難です。

.box-information { 
 
    border: 2px solid #000000; 
 
    margin: 0 auto 15px auto; 
 
    padding: 0 10px 60px 10px; 
 
    width: 80%; 
 
    background-color: #ffffff; 
 
    position: relative; 
 
} 
 

 
.button-blue:link, 
 
.button-blue:visited { 
 
    width: 7em; 
 
    display: block; 
 
    padding: 10px 15px; 
 
    background-color: rgba(66, 85, 123, 1); 
 
    font-size: 1.0em; 
 
    text-indent: 0; 
 
    text-align: center; 
 
    color: #ffffff; 
 
    position: absolute; 
 
    bottom: 10px; 
 
    left: auto; 
 
}

<div class="box-information your-business"> 
 
    <p class="title-information"> 
 
    Your Business 
 
    </p> 
 
    <p class="text-information"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
    </p> 
 
    <a class="button-blue learn-more" href="#">Learn More</a> 
 
</div>

私は下からボタンを相殺することができるよ、と私はAUTO以外のものを使用している場合、私は水平方向のボタンを相殺することができます：ここで私は、現在持っているコードです。

私が間違っていることを理解するのを手伝ってください。

margin-left:auto; 
margin-right:auto; 

ボタンのCSSプロパティに：それでブロック要素を中央に

Answer 1

は、すべてを行う必要が追加され、親です。

（あなたが最初position: absoluteと絶対位置のプロパティを削除する必要があります。）

このcodepenを見てみましょう：https://codepen.io/anon/pen/qXYEpd

Answer 2

更新

.box-information { 
 
    border: 2px solid #000000; 
 
    margin: 0 auto 15px auto; 
 
    padding: 0 10px 60px 10px; 
 
    width: 80%; 
 
    background-color: #ffffff; 
 
    position: relative; 
 
} 
 

 
.button-blue:link, 
 
.button-blue:visited { 
 
    width: 7em; 
 
    display: block; 
 
    padding: 10px 15px; 
 
    background-color: rgba(66, 85, 123, 1); 
 
    font-size: 1.0em; 
 
    text-indent: 0; 
 
    text-align: center; 
 
    color: #ffffff; 
 
    position: absolute; 
 
    bottom: 10px; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
}

<div class="box-information your-business"> 
 
    <p class="title-information"> 
 
    Your Business 
 
    </p> 
 
    <p class="text-information"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
    </p> 
 
    <a class="button-blue learn-more" href="#">Learn More</a> 
 
</div>