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

2019-07-13 admin

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

[toc]

一、水平居中

1. inline-block + text-align

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

<div class="parent">
    <div class="child">child</div>
</div>
.parent {
    text-align: center;
}
.child {
    display: inline-block;
}

2. table + margin

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

<div class="parent">
    <div class="child">child</div>
</div>
.child {
    display: table;
    margin: 0 auto;
}

3. absolute + transform

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

<div class="parent">
    <div class="child">child</div>
</div>
.parent {
    position: relative;
}
.child {
    position: absolute;
    left: 50%;
    top: translateX(-50%);
}

4. flex + justify-content

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

<div class="parent">
    <div class="child">child</div>
</div>
.parent {
    display: flex;
    justify-content: center;
}

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

注意点:

  • text-align用来设置元素中的的文本行内元素的对齐方式;
  • text-align只对行内元素有效,对块元素无效,不能设置块元素的对齐方式;

二、垂直居中

1. line-height = height (只适用于单行内行内元素)

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

<div class="parent">
    <div class="child">child</div>
</div>
.parent {
    height: 100px;
}
.child {
    line-height: 100px;
}

2. table-cell + vertical-align(单行,多行都可居中)

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

<div class="parent">
    <div class="child">child</div>
</div>
.parent {
    display: table-cell;
    vertical-align: middle;
}

3. absolute + transform

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

<div class="parent">
    <div class="child">child</div>
</div>
.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transfrom: translateY(-50%);
}

4. flex + align-item

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

<div class="parent">
    <div class="child">child</div>
</div>
.parent {
    display: flex;
    align-items: center;
}

三、水平垂直居中

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

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

<div class="parent">
    <div class="child">child</div>
</div>
.parent {
    diaplay: teable-cell;
    text-align: center;
    vertical-align: middle;
}
.child {
    display: inline-block;
}

2. margin: auto

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

<div class="parent">
    <div class="child">child</div>
</div>
.parent {
    positon: relative;
}
.child {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}

3. transform + translate

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

<div class="parent">
    <div class="child">child</div>
</div>
.parent {
    positon: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

4. flex

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

<div class="parent">
    <div class="child">child</div>
</div>
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

注意点:

  1. 行内元素设置宽高是无效的,可以通过设置line-height实现行内元素高度的设置,行内元素设置margin或者padding只有左右有效,上下无效。
  2. flex(ie 9以上才支持)的兼容性写法:
{
    display: -webkit-box;
    display: -webkit-flex;
     display: -moz-flex; 
      display: -ms-flexbox; 
      display: flex;
}

(完)

[转载]原文链接:https://segmentfault.com/a/1190000019750996

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-69675.html

文章标题:前端面试重点之--居中问题

相关文章
Web前端开发与iOS终端开发的异同
毕业之前一直在做前端开发,毕业后就转成做iOS开发,这两者有很多挺有意思的对比,尝试写下我能想到的它们的一些相同点和不同点。 语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,...
2016-01-13
JavaScript游戏之连连看源码分享
JavaScript游戏之连连看源码 下载地址:JavaScript游戏之连连看源码 解压密码:www.javascriptcn.com ...
2015-11-12
jQuery中DOM树操作之复制元素的方法
本文实例讲述了jQuery中DOM树操作之复制元素的方法。分享给大家供大家参考。具体分析如下: 复制元素 前面提到的操作包括:插人新创建的元素、将元素从文档中的一个位置移动 到另一个位置,以及通过新元素来包装已有的元素。可是,有时候也会用到...
2015-11-13
Node.js的不足之处
跨平台编程能力不够强大 Bowery团队指出Go能很方便地在不同系统里进行程序编译,这是他们转入Go的重要原因之一。 作为开发平台,对Linux,Windows,OSX等常见操作系统提供支援是能否吸引开发者的基本要素。在Go中,开发者可以针...
2015-11-12
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
前端MV*框架的意义
经常有人质疑,在前端搞MV有什么意义?也有人提出这样的疑问:以AngularJS,Knockout,BackBone为代表的MV框架,它跟jQuery这样的框架有什么区别?我jQuery用得好好的,有什么必要再引入这种框架? 回答这些问题之...
2016-03-11
前端问答社区成立了
由雷锋网友提供的给大家相互交流的前端问答社区正式上线了,欢迎大家来此相互交流相互学习 ...
2016-03-30
面试官:谈谈你对 CSS 盒模型的认识?(你确定会?)
题目:谈谈你对 CSS 盒模型的认识 涉及知识点(层层递进): 基本概念:标准模型+ IE模型(区别) CSS如何设置这两种模型 JS如何设置获取盒子模型对应的宽和高 实例题(根据盒模型解释边距重叠) BFC(边距重叠解决方案) 1...
2018-06-09
前端工程师应该具备的三种思维
如果你是一个天才等级的工程师(马上可以离开),可以独立完成一个很多事情,你可以是一个怪咖,因为我相信没有一个人不会不佩服你。但现实归现实,多数人都不是天才,而我们在职场上也不是单打独斗,我们需要团队合作,需要协调和配合,需要考虑除了代码以外...
2016-01-13
JavaScript正则进阶之路——活学妙用奇淫正则表达式
有些童鞋肯定有所疑惑,花了大量时间学习正则表达式,却发现没有用武之地,正则不就是验证个邮箱嘛,其他地方基本用不上,其实,大部分人都是这种感觉,所以有些人干脆不学,觉得又难又没多大用处。殊不知,想要成为编程大牛,正则表达式必须玩转,GitH...
2017-05-31
回到顶部