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

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



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

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

transformを使えば良いそうです。

.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%);
}
using element's own (not parent's) width for calculation or percentage in css, without javascript
参考
using element's own (not parent's) width for calculation or percentage in css, without javascript

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

using element's own (not parent's) width for calculation or percentage in css, without javascript Stack Overflow

今日はここまで

関連する記事



こちらはいかが?


コメントを残す