面试常问:水平居中和垂直居中的方法

水平居中

  1. 文本居中

    • 如果元素为行内元素,可以将父元素的text-align属性设置为center,这样子元素就会水平居中对齐

    .text{
    text-align: center;
    }

  2. 固定宽度的居中

    • 如果元素宽度已知并固定,可以通过将左右margin设置为auto来实现水平居中。

    .content{
    margin-left:auto;
    margin-right:auto;
    }

  3. 绝对定位和移动

    • 可以使用绝对定位和transform来实现水平居中。首先将元素的左边距和右边距都设置为auto,然后使用transform属性将元素向左平移50%。

    .content{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    }

  4. Flexbox布局

    .content{
    display: flex;
    justify-content: center;
    }

  5. 表格布局

    • 将父元素的display属性设置为table-cell,并将text-align属性设置为center。

    .content{
    display: table-cell;
    text-align: center;
    }

垂直居中

  1. 表格布局

    • 将父元素的display属性设置为table,并将子元素的display属性设置为table-cell,然后使用vertical-align属性将子元素垂直居中
    • 未知高度的块级父子元素居中,模拟表格布局
    • 缺点:IE67不兼容,父级 overflow:hidden 失效

    .parentcont {
    display: table;
    }
    .childCont {
    display: table-cell;
    vertical-align: middle;
    }

  2. Flex布局

    • 将父元素的display属性设置为flex,并使用align-items属性将子元素垂直居中。

    .pacon {
    display: flex;
    align-items: center;
    }

  3. 绝对定位和负边距

    • 已知高度的子元素,将父元素设置为相对定位,子元素设置为绝对定位,并使用top: 50%将其垂直居中,然后通过负边距的方式将子元素向上移动一半的高度

    .parentCon{
    position: relative;
    }
    .childCon {
    position: absolute;
    top: 50%;
    margin-top: -`100px; /* 假设子元素高度为200px的一半 */
    }

  4. 文本垂直居中

    • 对于单行文本,可以设置父元素的line-height属性和高度相等,从而实现文本的垂直居中

    .con{
    height: 50px;
    line-height: 50px;
    }

  5. CSS3位移

    • 使用CSS3的transform属性的translateY函数将子元素向上位移一半的高度实现垂直居中

    .con {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    }

  6. inline-block兄弟元素

    • 通过在父元素中插入一个inline-block元素,并设置其垂直对齐方式为middle来实现垂直居中

    .parentCon {
    height: 100%;
    }
    .extracon {
    display: inline-block;
    vertical-align: middle;
    }
    .childcon {
    display: inline-block;
    vertical-align: middle;
    }

相关推荐
凌辰揽月1 小时前
7月10号总结 (1)
前端·css·css3
天天扭码1 小时前
很全面的前端面试——CSS篇(上)
前端·css·面试
sunbyte2 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Eighteen Z3 小时前
CSS揭秘:10.平行四边形
前端·css·css3
嘉琪0015 小时前
封装一个有最小化的dialog组件
前端·javascript·css
Zachery Pole5 小时前
BootStrap
前端·bootstrap·html
淮北4946 小时前
最简单的实验室资产管理系统,使用Flask,mysql,html(四、知识补充)
mysql·flask·html
多啦C梦a6 小时前
【前端必修】闭包、`this`、`箭头函数`、`bind`、节流,一篇文章全懂!
前端·javascript·html
Canaan2857 小时前
前端开发-标签
html
春秋半夏8 小时前
音乐播放、歌词滚动
前端·css