(面试题)垂直居中的几种实现方式

cheukyin 发布于2019-08-30 11:18 / 1825人阅读

摘要：尤其是在实际页面中，有很多特殊的场景，导致水平居中实现起来比较麻烦。这篇文章旨在纪录一些我知道的居中方式。以一道经典面试题为例一个的在一个水平垂直居中，用实现。首先定义元素层和垂直居中无关的样式直接定义在里。

相比较水平居中，垂直居中比较复杂点。尤其是在实际页面中，有很多特殊的场景，导致水平居中实现起来比较麻烦。这篇文章旨在纪录一些我知道的居中方式。以一道经典面试题为例：一个200*200的div在一个div水平垂直居中，用css实现。

首先定义元素

1.百分比的方式

缺点：必须知道居中元素的实际大小。根据实际大小用margin进行调整，因为top，left是以元素的上边框进行计算的。

2.百分比结合transform

优点：利用transform改良上面那种必须知道元素大小的限制。

3.flex布局

Flex布局(弹性布局)，作为css3新增的布局方式，能很好的支持不同的屏幕大小，绝对是现在的前端工程师必备技能。

4.flex布局结合margin

    .margin{
            display: flex;
        }
        
    .center{
            margin: auto;
        }

5.绝对定位和0

    .margin{
            position: relative;
        }

    .center{
            overflow: auto;
            margin: auto;
            position: absolute;
            top: 0; left: 0; bottom: 0; right: 0;
       }

GPU云服务器云服务器 js继承的几种方式服务器请求的几种方式 java创建对象的几种方式实现垂直居中

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

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

面试常见问题——垂直居中的几种方法

摘要：前几天面试，被问到两次，没答好，找到这篇文章收藏学习一下，来自这里做手机的页面，经常会遇到需要垂直居中的情况，这里把常用的垂直居中的几种方法整理下。（前几天面试，被问到两次，没答好，找到这篇文章收藏学习一下，来自这里）做手机的页面，经常会遇到需要垂直居中的情况，这里把常用的垂直居中的几种方法整理下。结构我是垂直居中元素方法1：dispaly:table-cel...

Prasanta 2019-08-28 18:05 评论0 收藏0
基本方法笔记 - 收藏集 - 掘金

摘要：探讨判断横竖屏的最佳实现前端掘金在移动端，判断横竖屏的场景并不少见，比如根据横竖屏以不同的样式来适配，抑或是提醒用户切换为竖屏以保持良好的用户体验。探讨判断横竖屏的最佳实现 - 前端 - 掘金在移动端，判断横竖屏的场景并不少见，比如根据横竖屏以不同的样式来适配，抑或是提醒用户切换为竖屏以保持良好的用户体验。判断横竖屏的实现方法多种多样，本文就此来探讨下目前有哪些实现方法以及其中的优...

maochunguang 2019-08-20 17:44 评论0 收藏0
那些年，碰上过的面试题

摘要：元素在跨越特定阈值前为相对定位，之后为固定定位。和简单介绍和，哪个会触发哪个触发顺序，哪个能够避免，哪个时尽量减少而不可能避免，哪些操作会触发阮一峰动画动画与动画区别性能区别性能优化动画性能优化动画介绍后续还会继续进行面试题的积累记录一下最近碰上的面试题 js篇介绍一下Array的API/方法，具体到返回值和参数 join / slice / splice / sort / pu...

bitkylin 2019-08-29 16:24 评论0 收藏0
那些年，碰上过的面试题

摘要：元素在跨越特定阈值前为相对定位，之后为固定定位。和简单介绍和，哪个会触发哪个触发顺序，哪个能够避免，哪个时尽量减少而不可能避免，哪些操作会触发阮一峰动画动画与动画区别性能区别性能优化动画性能优化动画介绍后续还会继续进行面试题的积累记录一下最近碰上的面试题 js篇介绍一下Array的API/方法，具体到返回值和参数 join / slice / splice / sort / pu...

nicercode 2019-08-26 12:12 评论0 收藏0
使一个div垂直+水平居中的几种方法

摘要：前几天去一家互联网公司面试，面试官问到了这个应该算是比较简单的问题，在我自认为回答正确时，才知道这道题的答案有很多种，下面就让我们一起来探讨一下这个问题思路绝对定位居中原始版这个是我回答出来的，也是被各位所熟知的一种方法，设外层相对定位，内前几天去一家互联网公司面试，面试官问到了这个应该算是比较简单的问题，在我自认为回答正确时，才知道这道题的答案有很多种，下面就让我们一起来探讨一下这...

joyqi 2019-08-29 11:04 评论0 收藏0