【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