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

作成日： 2019年1月4日

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

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を楽しんでいます。

⬅ 前の記事
え？竹を枯らせるには1mの高さで切ればいいだけなの？
次の記事 ➡
Photoshopを英語版で起動する方法

関連投稿

コメントをどうぞ

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