html+css水平居中和垂直居中

水平居中 1.定宽。左右:margin:auto 2.弹性盒设置 justify—content:center 3.父元素设置 text-align:center 4相对定位元素 left:0;right:0;定宽:左右margin:auto 5.相对定位元素 margin-left:50%;transform:translateX(-50%)【margin,padding相对于包含块宽度的百分比】 垂直居中 1.line-height【单行文本垂直居中】 2.弹性盒设置 align-items:center 3.相对定位元素 top:0;bottom:0;定高:上下 margin:auto 4.相对定位元素,top:50%,transform:translateY(-50%) 相对元素水平垂直居中 position:relative; top:50% left:50% teansform:translate(-50%,-50%)

猜你喜欢

转载自www.cnblogs.com/dbda/p/11249950.html