https://qwerty.work/tags/absolute/ Recent content in Absolute on qwerty.work Hugo -- gohugo.io ja-JP Tue, 05 Jul 2022 09:00:08 +0900 https://qwerty.work/post/2022/07/css-position-absolute-center/ Tue, 05 Jul 2022 09:00:08 +0900 https://qwerty.work/post/2022/07/css-position-absolute-center/ <p>とりあえずメモ。対象の要素を<code>position:absolute;</code>で左右中央や、上下中央、または上下左右中央に配置する最近のやり方。</p> <h2 id="positionabsoluteとtransformを使用">position:absolute;とtransformを使用 </h2><h3 id="参考ページ">参考ページ </h3> <div class="link-card"> <a href="https://cotodama.co/position-absolute-center/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://cotodama.co/position-absolute-center/" alt="https://cotodama.co/position-absolute-center/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://cotodama.co/position-absolute-center/</span> <span class="link-card-url">https://cotodama.co/position-absolute-center/</span> </div> </a> </div> <div class="link-card"> <a href="https://arts-factory.net/position/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://arts-factory.net/position/" alt="https://arts-factory.net/position/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://arts-factory.net/position/</span> <span class="link-card-url">https://arts-factory.net/position/</span> </div> </a> </div> <h2 id="positionabsolute以外で中央配置する方法">position:absolute;以外で中央配置する方法 </h2><h3 id="参考ページ-1">参考ページ </h3> <div class="link-card"> <a href="https://www.esz.co.jp/blog/2847.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.esz.co.jp/blog/2847.html" alt="https://www.esz.co.jp/blog/2847.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.esz.co.jp/blog/2847.html</span> <span class="link-card-url">https://www.esz.co.jp/blog/2847.html</span> </div> </a> </div>