水平垂直居中常见方式总结
Posted 木槿惜年
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了水平垂直居中常见方式总结相关的知识,希望对你有一定的参考价值。
水平垂直居中常见方式总结
html结构为:
<div class="parent"> <div class="child"></div> </div>
(1)父元素相对定位,子元素关键在于设置为绝对定位,margin:auto
.parent{ width:400px; height:400px; background:#afa; position:relative; } .child{ position:absolute; left:0; bottom:0; right:0; top:0; margin:auto; background:yellow; width:100px; height:100px; }
(2)父元素相对定位,子元素绝对定位,且设置transform:translate(-50%,-50%)
.parent{ width:400px; height:400px; background:#afa; position:relative; } .child{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:yellow; width:100px; height:100px; }
(3)父元素设置为display:flex;justify-content:center;align-items:center
.parent{ width:400px; height:400px; display:flex; justify-content:center; align-items:center; background:#afa; } .child{ width:100px; height:100px; background:yellow; }
(4)设置父元素display:table-cell;text-align:center;vertical-align:center;子元素:display:inline-block;
.parent{ display:table-cell; width:400px; height:400px; background:#afa; text-align:center; vertical-align: middle; } .child{ display:inline-block; width:100px; height:100px; background:yellow; }
以上是关于水平垂直居中常见方式总结的主要内容,如果未能解决你的问题,请参考以下文章