【CSS】JS無しで要素を親要素の角と要素の中心を合わせて配置する方法

作成日:

高さと幅が可変な要素を親要素の角と要素の中心を合わせて配置する方法です。説明が難しいのでコードを見て下さい。

See the Pen 【CSS】JS無しで親要素の角の中央に配置する方法 by JaSTIN (@JaSTIN) on CodePen.

transformを使えば良いそうです。[css].corner-tl{
position: absolute;
top: 0;
left: 0;
transform: translate(-50%, -50%);
}
.corner-tr{
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
}
.corner-bl{
position: absolute;
bottom: 0;
left: 0;
transform: translate(-50%, 50%);
}
.corner-br{
position: absolute;
bottom: 0;
right: 0;
transform: translate(50%, 50%);
}[/css]

using element's own (not parent's) width for calculation or percentage in css, without javascript https://stackoverflow.com/questions/21638859/using-elements-own-not-parents-width-for-calculation-or-percentage-in-css-w

I've been experimenting with a way to get a page element to overlap the elements on either side of it and stay perfectly centered between them. My solution was to declare position:relative and set

物草 灸太郎

WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。

コメントをどうぞ

  • メールアドレスが公開されることはありません。
  • コメント欄にURLは入力できません。
  • このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシー利用規約が適用されます。