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

水平居中

  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;
    }

相关推荐
软件技术NINI9 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
Pu_Nine_910 小时前
教程: 在网页中利用原生CSS实现3D旋转动画
css·3d·css3
weixin_ab13 小时前
【HTML分离术】
前端·html
struggle202516 小时前
AxonHub 开源程序是一个现代 AI 网关系统,提供统一的 OpenAI、Anthropic 和 AI SDK 兼容 API
css·人工智能·typescript·go·shell·powershell
朝阳3918 小时前
CSS【实战】可编辑元素实现 placeholder -- contenteditable=“true“
css
咚咚咚小柒20 小时前
【前端】用el-popover做通用悬停气泡(可设置弹框宽度)
前端·javascript·vue.js·elementui·html·scss
Ares-Wang20 小时前
CSS3》》 transform、transition、translate、animation 区别
前端·css·css3
Hello123网站21 小时前
300多个Html5小游戏列表和下载地址
前端·html·html5
fox_1 天前
CSS3:水平垂直居中的 N 种实现方法
css
超能996要躺平1 天前
用三行 CSS 实现任意多列等分布局:深入掌握 Grid 的 repeat() 与 gap
前端·css