CSSで作った×のアイコンを、ボックスの上下左右の中央に配置したい

Question

CSSで×のアイコンを作り、それをボックスの上下左右の中央に配置したいと考えています。
そこで次のようなHTML・CSSを作りましたが、うまくいきません。

HTML
<div class="cross-icon">
    <div class="cross-line"></div>
</div>

CSS
.cross-icon {
    background-color: skyblue;
    width: 100px;
    height: 100px;
}
  
.cross-line {
    position: relative;
}
  
.cross-line::before,
.cross-line::after {
    position: absolute;
    top: 45px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    height: 3px;
    width: 25px;
    background: #555;
    content: "";
}
  
.cross-line::before {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
}
  
.cross-line::after {
   -webkit-transform: rotate(-45deg);
           transform: rotate(-45deg);
}

うまくいかないのは、×アイコンがきちんと上下左右の中央に表示されない点です。

私が作成したコードでは.cross-line::beforeと.cross-line::afterの左右の中央ぞろえは

left: 50%;
transform: translateX(-50%);

と指定しているのに、少し右にずれます。

また.cross-line::beforeと.cross-line::afterの上下の中央ぞろえは、本当は

top: 50%;
transform: translateY(-50%);

と指定したかったのですが、なぜか%での指定が効かず、やむなく

top: 45px;

と指定しています。

そこで質問ですが、×のアイコンを中央ぞろえにするにはどうすればいいのでしょうか？

今回のアイコンが完成すれば、今後もこのコードを使いまわすことを考えています。

線の長さや太さ等は、作成するサイトごとに異なるため、数値入力は手動で行わなければなりませんが、
「中央にそろえる」という点に関しては、手動ではなく自動で行える設定にしたいのです。
そこで今回はpositionのtop、leftをあらかじめ50%に設定することで中央ぞろえの自動化を目指しました。

ですが、自動で中央ぞろえができるのであればpositionでなくてもかまいません。
ご教授、よろしくお願いします。

Answer 1

うまくいかないのは、position: relative;で基準にしている要素のサイズを指定してないからです。

position: relative; を .cross-icon の方に移動するか、

.cross-icon {
    background-color: skyblue;
    width: 100px;
    height: 100px;
    position: relative;
}

サイズ指定を .cross-line の方に移動すればいいでしょう。

.cross-line {
    background-color: skyblue;
    width: 100px;
    height: 100px;
    position: relative;
}

さらに、transform: rotate(45deg);で前の transform: translateX(-50%); を上書きしてしまっているのtranslateXの設定が無効になってます。両方同時に設定しましょう。

ということで下記でうまくいきます。

.cross-icon {
}

.cross-line {
  background-color: skyblue;
  width: 100px;
  height: 100px;
  position: relative;
}

.cross-line::before,
.cross-line::after {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 3px;
  width: 25px;
  background: #555;
  content: "";
}

.cross-line::before {
 -webkit-transform: translate(-50%, -50%)  rotate(45deg);
  transform: translate(-50%, -50%)  rotate(45deg);
}

.cross-line::after {
 -webkit-transform: translate(-50%, -50%)  rotate(-45deg);
  transform: translate(-50%, -50%)  rotate(-45deg);
}

CodePenサンプル

Comments

[cheshire-cat]

ありがとうございます。
transformの理解が不十分でした。
コードも簡潔になり、大変使いやすいです！

[sousuke]

rotateした後のheight？でtranslateできるんか～あんまり使わんから初めて知った。
仕組みがわからんけどtranslateYの移動量は1.5じゃないのは明らかやね～すごい。

[hatena19]

https://developer.mozilla.org/ja/docs/Web/CSS/transform-function/rotate
の「回転とその他の変形の組み合わせ」の項目に解説してありますが、
translate() rotate() の順で記述すると、移動してからその場で回転します。rotate() translate() の順で記述すると、回転してから移動するので、回転した方向に移動する方向が変わってしまいます。
また、 rotate() で回転する中心は、既定では要素の中心です。
ということで、
transform: translate(-50%, -50%) rotate(45deg);
はまず要素の縦横のサイズの半分だけ左上に移動した後、要素の中心を固定軸に45度回転する、ということになります。

Answer 2

height widthで置いてから傾けたら微妙に中央にならん気がする。
親（例では100×100）の中に25×25の正方形を完璧に上下左右の中央に置いてから
対角45度に線引いたほうが安心できる…気がする。ずれる原因はぶっちゃけわからん！

jsfiddle

<div class="cross-line"></div>

.cross-line {
  position: relative;
  width: 100px;
  height: 50px;
  background-color: skyblue;
}

.cross-line::before,
.cross-line::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  width: 25px;
  height: 25px;
  content: '';
}


.cross-line::before {
  background: linear-gradient(45deg, transparent, transparent 45.5%, #555 49.5%, #555 50.5%, transparent 55.5%, transparent);
}

.cross-line::after {
  background: linear-gradient(-45deg, transparent, transparent 45.5%, #555 49.5%, #555 50.5%, transparent 55.5%, transparent);
}

Comments

[cheshire-cat]

正方形に車線を引くというのは考えもしなかったです。

ありがとうございました。

Answer 3

display: flex;
justify-content: center;
align-items: center
コード

Comments

[cheshire-cat]

回答いただきありがとうございます。
ですが、cross-iconにflex等を指定しても中央にはそろいませんでした。
指定場所が間違っているのでしょうか？