前端面试重点之--居中问题

AJie 发布于2019-08-02 15:31 / 1534人阅读

摘要：前端面试重点居中问题在页面布局开发中，居中问题是我们经常碰到的问题，掌握居中问题对于解决页面布局非常重要，同时它也是常见的面试重点。已知宽高的元素父元素相对定位，子元素绝对定位。以上才支持的兼容性写法完

前端面试重点——居中问题

在页面布局开发中，居中问题是我们经常碰到的问题，掌握居中问题对于解决页面布局非常重要，同时它也是常见的面试重点。本文汇总一些常见的居中方式以及一些注意点，权当学习笔记。

[toc]

一、水平居中 1. inline-block + text-align

确保子元素是行内块级元素后，给父元素 text-align: center; 这种情况对于子元素定宽或者不定宽都生效。


    child

.parent {
    text-align: center;
}
.child {
    display: inline-block;
}

2. table + margin

此时利用table的宽度是内容的宽度，且table可以使用margin


    child

.child {
    display: table;
    margin: 0 auto;
}

3. absolute + transform

确定父元素 相对定位后，将子元素通过绝对定位在父元素内实现居中。该方法适用于子元素定宽或者不定宽，万能方法。


    child

.parent {
    position: relative;
}
.child {
    position: absolute;
    left: 50%;
    top: translateX(-50%);
}

4. flex + justify-content

弹性布局（flex布局）也是常用来居中的方式，只需要给父级元素添加弹性布局格式，同时设置横轴对齐方式justiify-content来设置居中。


    child

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

在选择居中对齐的时候，也可以通过考虑子元素的宽度是否确定，如果宽度确定，也可通过：margin: 0 auto;实现水平居中。

注意点：

text-align用来设置元素中的的文本行内元素的对齐方式；

text-align只对行内元素有效，对块元素无效，不能设置块元素的对齐方式；

二、垂直居中 1. line-height = height （只适用于单行内行内元素）

这种方法在设置单行块的时候特别有效，需要知道父元素高度。


    child

.parent {
    height: 100px;
}
.child {
    line-height: 100px;
}

2. table-cell + vertical-align（单行，多行都可居中）

利用表格单元格的特性，单元格内支持居中。


    child

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

3. absolute + transform

父元素相对布局，子元素绝对布局，适用很多场景。


    child

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transfrom: translateY(-50%);
}

4. flex + align-item

flex布局，通过纵向对齐align-item设置交叉轴对齐。


    child

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

三、水平垂直居中

将上面的水平居中方法和垂直居中方法结合起来就可以实现水平垂直居中。

1. inline-block + text-align + table-cell + vertical-align


    child

.parent {
    diaplay: teable-cell;
    text-align: center;
    vertical-align: middle;
}
.child {
    display: inline-block;
}

2. margin: auto

已知宽高的元素父元素相对定位，子元素绝对定位。


    child

.parent {
    positon: relative;
}
.child {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}

3. transform + translate

不管宽高是否给定，都可以使用父元素相对定位，子元素绝对定位。（未知宽高可能是行内元素）


    child

.parent {
    positon: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

4. flex

flex布局，设置主轴和交叉轴的对齐方式。


    child

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

注意点：

行内元素设置宽高是无效的，可以通过设置line-height实现行内元素高度的设置，行内元素设置margin或者padding只有左右有效，上下无效。

flex(ie 9以上才支持)的兼容性写法：

{
    display: -webkit-box;
    display: -webkit-flex;
     display: -moz-flex; 
      display: -ms-flexbox; 
      display: flex;
}

（完）

云服务器 GPU云服务器 java面试之io 回显居中问题面试问题 javaee面试问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54179.html

前端面试重点之--居中问题

摘要：前端面试重点居中问题在页面布局开发中，居中问题是我们经常碰到的问题，掌握居中问题对于解决页面布局非常重要，同时它也是常见的面试重点。已知宽高的元素父元素相对定位，子元素绝对定位。以上才支持的兼容性写法完前端面试重点——居中问题在页面布局开发中，居中问题是我们经常碰到的问题，掌握居中问题对于解决页面布局非常重要，同时它也是常见的面试重点。本文汇总一些常见的居中方式以及一些注意点，权当...

张迁 2019-08-30 11:23 评论0 收藏0
查漏补缺 - 收藏集 - 掘金

摘要：酝酿许久之后，笔者准备接下来撰写前端面试题系列文章，内容涵盖浏览器框架分钟搞定常用基础知识前端掘金基础智商划重点在实际开发中，已经非常普及了。这道题--致敬各位10年阿里的前端开发 - 掘金很巧合，我在认识了两位同是10年工作经验的阿里前端开发小伙伴，不但要向前辈学习，我有时候还会选择另一种方法逗逗他们，拿了网上一道经典面试题，可能我连去阿里面试的机会都没有，但是我感受到了一次面试1...

YuboonaZhang 2019-08-29 12:56 评论0 收藏0
面试宝典

摘要：有谈谈面试与面试题对于前端面试的一些看法。动态规划算法的思想及实现方法帮大家理清动态规划的解决思路以及原理方法前端经典面试题从输入到页面加载发生了什么这是一篇开发的科普类文章，涉及到优化等多个方面。极客学院前端练习题道练习题，面试季练练手。由数据绑定和排序引入的几个 JavaScript 知识点在 JavaScript 的数据绑定和做简单的表格排序中遇到的几个知识点 [[JS 基础...

neu 2019-08-29 14:00 评论0 收藏0
拒信收割机の前端面经（CVTE，唯品会，百度）

摘要：另外回答的时候要淡定，一些问题就算不懂也不能慌，要和面试官谈笑风生，然后尽量扯回到自己懂的东西上面大公司比如百度给我的感觉就是很重视基础思维和潜力。 —— 虽然我的offer少，但是我的拒信多啊这几天终于闲下来，做一点微小的工作，整理了一些之前几家公司的前端面试题和个人经验，想做前端的师弟妹可以参考，也欢迎各同行大神来指教~ （以下问题不分先后，时间久远难免有些遗漏；很多问题面试官都...

yzd 2019-08-29 11:23 评论0 收藏0