親要素の中でブロック要素を右寄せにしたい

Question

領域の説明
div.parent : 親要素となるブロック
div.child : div.parent内にあるブロック。特に寄せたりはしない。
div.target : 右寄せしたいブロック。具体的には「上下中央」、div.parentの枠から10px離れた場所に配置したい。

やったこと

div.target {
    display: inline-block;
    position: absolute;
    right: 10px;
    margin-top: auto;
    margin-bottom: auto;
}

div.target {
    display: inline-block;
    margin-right: 10px;
    margin-left: auto;
    margin-top: auto;
    margin-bottom: auto;
}

上２つでは実現できませんでした。

Answer 1

.targetのheightサイズを指定できるかどうかでやり方が変わります。

サイズ指定できる場合

.parent {
  position: relative;
}
.target {
  width: ◯◯px;
  height: ◯◯px;
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -△△px; /*.target高さの1/2*/
}

もしくは

.parent {
  position: relative;
}
.target {
  width: ◯◯px;
  height: ◯◯px;
  position: absolute;
  right: 10px;
  top: 0;
  bottom: 0;
  margin: auto;
}

サイズ指定できない場合

.parent {
  position: relative;
}
.target {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

Comments

[jimyo]

ありがとうございます。
サイズを指定しない方法でできました。

top: 50%;

を

margin: auto 0;

と書き換えるとできないのはなぜでしょうか？
ヒントとなるキーワードだけでもいいので教えていただけると嬉しいです。

[aKusano]

・http://bashalog.c-brains.jp/14/08/06-100100.php
・https://hyper-text.org/archives/2014/08/position_absolute_center_layout.shtml
・http://kojika17.com/2012/08/margin-of-css.html

この辺りを熟読されると良いかと思います。

[jimyo]

ありがとうございます！

2つ目の記事が分かりやすかったです。

Answer 2

<div class="parent">
  <div class="child"></div>
  <div class="target"></div>
</div>

div {
  border: 1px solid #999;
}

.parent {
  width: 700px;
  height: 200px;
  padding: 10px;
  position: relative;
}

.child {
  width: 200px;
  height: 100%;
}

.target {
  width: 200px;
  height: 100px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 10px;
  margin: auto 0;
}

Answer 3

div.parent にposition:relative;を指定しておけばいいと思います。