实现元素水平垂直居中

在页面布局中,我们会遇到需要把元素居中对齐。不同的元素类型,对齐的方式都各不相同。html中大致可以分为2种,块级元素与行内元素。左右对齐可能相对简单,但是上下对齐我一直都没有用过。最近在刷掘金的时候,看到了一篇文章,写的比较全面,就整理下来,继续充能。

水平居中

一、行内元素

.parent{text-align:center}

二、块级元素

  •  块级元素一般居中
    .son{ margin:0 auto;}
  • 子元素包含float
    .parent{ width:fit-content;margin:0 auto}    //fit-content:包裹元素,并左右居中
    .son{ float:left}
  • 弹性盒子
    .parent{ display:flex;justify-content:center;}   //justify-content可以看做是text-align,不过这里控制flex水平对齐
    .son{ float:left}
  • 绝对定位
    ①transform .son{ position:absolute;left:50%;transform:translate(-50%,0)}
    ②left .son{ position:absolute;left:50%;width:宽度;margin-left:-0.5*宽度}
    ③left/right .son{ position:absolute;left:0;right:0;margin:0 auto;width:宽度}

垂直居中

一、行内元素

.parent{height:高度;}
.son{line-height:高度;}

二、块级元素

  • 行内块级元素(display:inline-block)
    .parent::after,.son{ display:inline-block;vertical-align:middle}
    .parent::after{ content:"";height:100%}
  • table
    .parent{ display:table;}
    .son{display:table-cell;vertical-algin:middle;}
  • flex
    .son{display:flex;align-items:center}
  • 绝对定位
    ①transform .son{position:absolute;top:50%;transform:translate(0;-50%)}
    ①top .son{position:absolute;top:50%;height:高度;margin-top:-0.5*高度}
    ①top/bottom .son{ position:absolute;top:0;bottom:0;margin:auto 0}

陈健的个人博客,记录生活所见所感、学习笔记。专注于Web前端_SEO教程_读书心得。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

返回主页看更多
狠狠的抽打博主 支付宝 扫一扫