前端面试常问的水平居中和垂直居中方法（高频面经）

面试和常用的居中方法

水平方向上

针对inline, 内联块inline-block, 内联表inline-table, inline-flex元素及img,span,button等元素.

text_div{text-align:center;
}

不定宽块状元素居中

.text_div{margin:0 auto;//且需要设置父级宽度
}

通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
.

wrap{float:left;position:relative;left:50%;clear:both;
}
.wrap-center{left:-50%;
}

垂直居中

单行内联(inline-)元素垂直居中

通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中。
.

text_div{height: 120px;line-height: 120px;
}

利用表布局

.father {display: table;
}
.children {display: table-cell;vertical-align: middle;text-align: center;
}

flex布局
.center-flex {
display: flex;
flex-direction: column;//上下排列
justify-content: center;
}
绝对布局方式

已知高度
.

parent {position: relative;
}
.child {position: absolute;top: 50%;height: 100px;margin-top: -50px;
}

未知高度

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

垂直水平居中根据上方结合

flex方式

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

grid方式

.parent {height: 140px;display: grid;
}
.child { margin: auto;
}

前端面试常问的水平居中和垂直居中方法（高频面经）相关推荐

2019前端面试常问
面试项目简介: Vue:hash(散列算法)DOM Diff算法(React) Node.js https://www.cnblogs.com/DCL1314/p/7903085.html 路由传参: ...
web前端面试常问问题一（肝货）
目录 1.什么是盒子模型?盒子模型分为哪几种?如何计算? 2.描述cookies,sessionStorage和localStorage的区别? 3.行内元素有哪些?块级元素有哪些? 空(void)元 ...
前端面试常问的题目（持续更新中）
1.闭包问题什么是闭包?答:"闭包就是能够读取其他函数内部变量的函数造成闭包的原因?答: 解决方法?答:可以使用let.立即执行函数闭包可以实现什么?可以访问局部变量.可以保护变量不受 ...
大厂前端面试都问些什么问题？入职爱奇艺年薪48万，面试经验总结
前言 "金九银十"跳槽季,又到了面试求职的高峰期.好多小伙伴都会跳槽去找工作.如果你不跳槽,也建议把这篇文章看完,毕竟金九银十之后,就是金三银四了,总是逃不掉的? 你在面试的时候, ...
前端面试常见面试题及答案
前端面试常见面试题及答案 h5新特性 ES6新特性 vuex的理解,组成以及原理介绍前端常用框架 h5新特性 html5总的来说比html4多了十个新特性,但其不支持ie8及ie8以下版本的浏览器 ...
测开工程师-面试常问测试用例
测开工程师-面试常问测试用例一.网络测试的一般流程二.弱网功能测试四.微信红包测试五.无网状态测试三.微信朋友圈点赞测试六.登陆界面测试七.直播APP测试八.微信搜索界面测试九.水杯 ...
java8 垃圾收集_面试官：怎么做JDK8的垃圾收集器的调优(面试常问)
看着面试官真诚的眼神,心中暗想看起来年纪轻轻却提出如此直击灵魂的问题.擦了擦额头上汗,我稍微调整了一下紧张的情绪,对面试官说: 在jdk8中有serial收集器.parallel收集器.cms收集器. ...
GET 和 POST 的区别(重要,面试常问)
GET 和 POST 的区别(重要,面试常问) 1.GET 在浏览器回退时是无害的,而 POST 会再次提交请求. (get:不会再次发送请求:post:浏览器会继续向URI发送请求) 2.GET 产 ...
前端面试被问到性能优化该肿么办！
性能优化1 前端面试被问到性能优化该肿么办! 1.1 页面重构怎么操作? 网站重构:在不改变外部行为的前提下,简化结构.添加可读性,而在网站前端保持一致的行为. 也就是说是在不改变UI的情况下,对网站 ...

前端面试常问的水平居中和垂直居中方法（高频面经）

面试和常用的居中方法

水平方向上

垂直居中

前端面试常问的水平居中和垂直居中方法（高频面经）相关推荐

最新文章

热门文章