css垂直居中的几种实现方式,优秀程序员的代码经验总结

这是一篇值得收藏起来,隔三差五就拿来重读的文章!因为作者向你保证,他“遇到的所有糟糕的代码,都是因为没采纳这些实践经验。而任何一段优秀的代码,都采纳了至少部分实践经验。”

图片 1

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

还等什么?赶快看看这些经验就是什么吧?

上午楼主遇到一个需要处理双击事件的需求,在这里介绍下如何在触发doubleCLick时间的时候,
不触发click事件的解决办法, 顺便分享给大家。

首先定义元素

我已经写了20年代码了,在此期间曾与17个团队共事过,使用不同的语言做过数百个项目。

问题阐述

!--dom层:和垂直居中无关的样式直接定义在style里。--body div  div /div /div/body 

这些项目从最简单的博客网站,到支持每秒3000多次请求的API,还有曾经热卖过的应用。

首先, 我们的DOM 是天然支持dbClick 事件的, 线上demo:

1.百分比的方式

根据这些经验,再结合我读过的书,我认为编程中最重要的是:# 可读性。#

可以清晰的看到, 双击之后, 触发处理双击事件的逻辑,
但是同时也触发了两次click事件:

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

可读性

这个副作用不是我们预期的, 需要处理一下。

style .center { position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; } .margin{ position: relative; //外层元素必须定义为relative,否则是相对整个屏幕水平垂直居中 }/style 

表面上看来,可读性似乎很主观。不同语言、代码、和团队对于可读性的定义不尽相同。但如果深入本质的话,就会发现代码可读性有一些非常关键的因素。

解决办法

2.百分比结合transform

许多程序员太倾向于计算机了,只要程序能运行就一了百了。尽管是老生常谈,但这种方式完全断绝了人参与的可能性。

解决办法也很简单: 延迟 click事件的处理, 直到判断这个click 不在
doubleClick 中。

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

最近几个月,
我在努力将这些人为因素提炼成11条写程序的实践经验,专门讨论如何增强可读性并降低复杂度。

原理

style .center{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .margin{ position: relative; }/style 

我在BaseCode中写过这些详细内容,并将其应用到真实世界的代码片段中。

这个延迟的click事件会放在一个 Promise 队列中, 并处于pending状态。

3.flex布局

许多人会认为这些太基础、无关紧要,可以忽视。但我可以向你保证,我遇到的所有糟糕的代码都是因为没采纳这些实践经验。而任何一段优秀的代码都采纳了至少部分实践经验。

当doubleClick事件触发之后, 就取消所有的Pending Promises,
这些事件也就不会执行。

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

格式

可取消的Promise

 style .margin { display: flex; justify-content: center; align-items: Center; } /style

我们在格式上消耗了太多精力。制表符还是空格,Allman还是KR。总会有一天,你会意识到格式在编程中并不是最重要的。

要处理这些处于 penging 状态的Promise, 我们需要用到可取消的Promise,
这个话题我在另一片文章中讨论过, 有兴趣的可以看一下。

4.flex布局结合margin

选择一种格式,应用到代码中,然后将这个过程自动化。然后就可以重新专注于写代码本身了。

下面是一个可以cancel的Promise的简单实现:

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

死代码

export const cancellablePromise = promise = { let isCanceled = false; const wrappedPromise = new Promise((resolve, reject) = { promise.then( value = (isCanceled ? reject({ isCanceled, value }) : resolve(value)), error = reject({ isCanceled, error }), ); }); return { promise: wrappedPromise, cancel: () = (isCanceled = true), };};

5.绝对定位和0

所有注释掉的代码块、未使用的变量和无法到达的的代码都是垃圾。他们就像在对读者说,“我不关心这段代码”。

要解决开头提到的这个问题,
我们就需要用到这个大杀器。先看下最终的结果,双击一下:

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注