CSS居中方法集锦

这阵一直忙各路笔试面试,心越来越浮躁,也好久没有写些东西。不过也正是这些虐我千百遍的笔试面试题让我愈发地觉得确有必要整理一下知识点,让网上书上看的杂乱无章的东西形成自己的体系。

前一阵改活控的BUG(好吧其实是第N次改需求)时发现一个头疼的问题,在用line-height实现行内垂直居中后居然发现移动终端浏览器不支持这个,改成inline-block配合padding也是不感冒。然后在css-tricks上找了找,瞬间豁然开朗,麻麻再也不用担心我的居中问题啦!

看得比较散,稍微整理如下。

行内元素

这个比较简单直接,将行内元素的line-height设置为与父元素height等值,便可以达到垂直居中的效果。而水平居中则是用烂了的text-align: center,在不脱离文档流的情况下都是很坚挺的存在。说到这里就要顺便黑一黑他的兄弟vertical-align: middle了,用起来还是诸多限制。

固定大小的块级元素

接下来就是最近接触的一些小tricks。在已知容器宽高的情况下怎样让它在父容器内始终水平和垂直都居中呢?这里用到绝对定位的百分比偏移,

<style>
  .container {
    position: relative;
    height: 600px;
    background-color: #bbb;
  }

  .center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 100px;
    margin-top: -50px;
    margin-left: -75px;
    background-color: #555;
  }
</style>

<div class="container">
  <div class="center">
  </div>
 </div>

首先用绝对定位的偏移量确定了框体的位置,然后巧妙地利用负margin根据实际宽高调整,原理如下图:

未知大小的块级元素

已知大小的元素可以根据宽高来修正边距,那么如果宽高也未知呢?这才是检验真理的最终标准!首先我们想到,按照上一种方法的思路,把位移也变成百分比不就行了?于是我们很快想到CSS3的transform。

<style>
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #555;
}
</style>

CSS3固然很爽,但有时也不得不兼顾老版本IE的脾气,尽管微软已经开始全面推广spartan,对家里的老爷子也还是要敬三分,不得不保留下来。

兼容方案

在这里,我们只能想象之前提到过的vertical-align: middle,然而它只能在table里发挥作用,对布局限制太多,怎样利用它呢?这里不得不佩服css-tricks上作者的脑洞,下面是它的方法:

If we set up a "ghost" element inside the parent that is 100% height, then we vertical-align: middle both that and the element to be centered, we get the same effect.

简单说就是利用伪元素:before,在元素前创造一个隐藏的、高度为100%的"table column",模拟出一个table布局,这样便可以利用vertical-align: center将子元素与其居中对齐。

最简单也是最高科技的方案

大道至简,最简洁的方法才是最牛逼的。最后再次把flex模型搬出来。

<style>
.container {
  display: flex;
  height: 600px;
  justify-content: center;
  align-items: center;
  background-color: #bbb;
}
</style>

寥寥几句,一切尘埃落定,这就是新技术的威力。不得不说flex是一个很方便的技术,在一些栅格布局的适配上做到了很多之前UI框架做的事情。可惜的是由于历史版本的原因,各浏览器的写法都有些微差别,IE之流的上古大神更是爱答不理,只得静待新标准的推进了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

【Golang语言社区】H5游戏开发--从零开始开发一款H5小游戏(二) 创造游戏世界,启动发条

上一节介绍了canvas的基础用法,了解了游戏开发所要用到的API。这篇文章开始,我将介绍怎么运用这些API来完成各种各样的游戏效果。这个过程更重要的是参透一些...

41430
来自专栏腾讯大讲堂的专栏

浅议内滚动布局

一、什么是内滚动布局? 所谓“内滚动布局”,顾名思义就是主滚动条在页面内部的布局,是相对于传统的<html>滚动而言的,例如,下图所示滚动条,是从头部下方开始:...

45150
来自专栏程序人生 阅读快乐

CSS设计指南 (第3版)

《图灵程序设计丛书:CSS设计指南(第3版)》是一本面向初中级读者的经典设计指南。全书共分8章,前4章分别介绍了HTML标记和文档结构、CSS工作原理、定位元素...

7510
来自专栏IT大咖说

从UI到AI——移动端H5生成技术漫谈

15250
来自专栏编程

Web前端开发的四个阶段

第一阶段:HTML的学习 超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架,无论是静态网页还是动态网页,最终...

21250
来自专栏前端新视界

视差滚动技术的简介及运用

维基百科地址:https://en.wikipedia.org/wiki/Parallax_scrolling 视察滚动是计算机图形学以及网页设计中的技术。原理...

28560
来自专栏前端小作坊

中文排版二三事

前段时间一直在折腾中文排版相关的事情,自认为结果还算不错。故开源之,即是Entry.css。这是一个可配置的、更适合阅读的中文文章样式库,可以用来快速搭建中文博...

10210
来自专栏菜鸟前端工程师

html+css学习笔记019-H5响应式布局0自适应布局

42120
来自专栏程序员的诗和远方

20180728_ARTS_week05

这题有点犯难,上面是 Discuss 中的一个解法,看了之后挺好理解的,要找回环字符串,就从 a 和 aa 一阶和二阶这两种形式往两边找,感觉特别巧妙。

10820
来自专栏GIS讲堂

lzugis——Arcgis Server for JavaScript API之自定义InfoWindow(续)

同样的标题后面加了一个括弧,不是为了增减博文数量,而确实是上个功能的完善,标注为续,意思是继续上次的内容,来说说如何自定义InfoWindow。

17330

扫码关注云+社区

领取腾讯云代金券