divタグの中のaタグのボタンを上下左右中央揃えにしたい

下記のような画像のリンクボタンを作りたいです

黒い背景のボックスの中に上下左右中央揃えのリンクボタンを作りたいです

positionとtransformを使って上下中央揃えにしたいのですが、translateXが効きません

該当のソースコード

html
1<div class="inner">
2<div class="btn6-container">
3  <a href="" class="btn6">ボタンはこちら6</a>
4</div>
5</div>

css
1.inner {
2    margin: 0 auto;
3    width: 800px;
4    padding: 50px;
5    margin-bottom: 50px;
6}
7a {
8    width: 230px;
9    height: 50px;
10    display: block;
11    background: #3F51B5;
12    color: white;
13    font-weight: 700;
14    text-decoration: none;
15    font-size: 16px;
16    padding-top: 15px;
17    padding-bottom: 15px;
18    padding-left: 16px;
19    margin-bottom: 50px;
20}
21.btn6-container {
22    background: black;
23    height: 107px;
24    position: relative;
25}
26.btn6 {
27    background: black;
28    border: 3px solid white;
29    position: relative;
30    top: 50%;
31    left: 50%;
32    transform: translateX(-50%);
33    transform: translateY(-50%);
34}

上記のコードの結果がこちらです

ご回答よろしくお願いいたします！

行動規範の内容に同意します

回答1件

ベストアンサー

css
1.btn6 {
2    transform: translateX(-50%) translateY(-50%);
3}

もしくは

css
1.btn6 {
2    transform: translate(-50%,-50%);
3}

transformプロパティが上書きされてしまうので、一緒に指定しなければいけません。

投稿2019/03/06 01:31

kszk311

総合スコア3404

Hisato

2019/03/06 01:33

とてもスッキリしました。ありがとうございます！！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

divタグの中のaタグのボタンを上下左右中央揃えにしたい

下記のような画像のリンクボタンを作りたいです

該当のソースコード

関連した質問