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

水平居中

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

相关推荐
urhero1 小时前
工作事项管理小工具——HTML版
前端·html·实用工具·工作事项跟踪·任务跟踪小工具·本地小程序
詩句☾⋆᭄南笙4 小时前
HTML的盒子模型
前端·html·盒子模型
Southern Wind6 小时前
Vue 3 多实例 + 缓存复用:理念及实践
前端·javascript·vue.js·缓存·html
Shi_haoliu7 小时前
Vue2 + Office Add-in关于用vue项目于加载项控制excel单元格内容(Demo版)
前端·javascript·vue.js·node.js·html·excel·office
街尾杂货店&8 小时前
css word属性
前端·css
Demoncode_y1 天前
前端布局入门:flex、grid 及其他常用布局
前端·css·布局·flex·grid
Filotimo_1 天前
2.CSS3.(3).html
前端·css3
CoderYanger1 天前
前端基础——HTML练习项目:填写简历信息
前端·css·职场和发展·html
CodeCraft Studio1 天前
国产化PDF处理控件Spire.PDF教程:如何在 C# 中从 HTML 和 PDF 模板生成 PDF
pdf·c#·html·.net·spire.pdf·pdf文档开发·html创建模板pdf
muyouking111 天前
深入理解 HTML `<label>` 的 `for` 属性:提升表单可访问性与用户体验
前端·html·ux