专栏首页星回的实验室CSS居中方法集锦

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 条评论
登录 后参与评论

相关文章

  • 打造自己的MapReduce[一]:Hadoop集群搭建

    那就是我在这里的每一篇文开头都必然是:最近工作好忙,又断更很久了……Anyway,这也不能成为偷懒的理由。我可能对记录技术有些固执的误解,总认为是要待到整理出一...

    星回
  • 使用Headless Browser渲染页面

    忙了很长一段时间,需要浮出水面来总结一工作了,不然做过的东西就像翻过一页完全没有记住的书,难免徒劳。

    星回
  • JavaScript中的沙箱机制探秘

    最近有需求要研究下开放给用户的自动化工具,于是就顺便整理了下沙箱的相关问题。Sandbox,中文称沙箱或者沙盘,在计算机安全中是个经常出现的名词。Sandbox...

    星回
  • JS魔法堂:精确判断IE的文档模式by特征嗅探

    一、前言                                 苦逼的前端攻城狮都深受浏览器兼容之苦,再完成每一项功能前都要左顾右盼,生怕浏览器不支持...

    ^_^肥仔John
  • Hadoop(CDH)分布式环境搭建(简单易懂,绝对有效)

    本文是由alice菌发表在:https://blog.csdn.net/weixin_44318830/article/details/102846055

    王知无
  • 关于深度学习框架Hamaa与Python API文档生成工具Sophon

    当时我学习Deep Learning已有两个月,看了很多论文、教程与博客,于是尝试着去阅读Keras的源代码来学习别人是怎么实现的,尤其是back propa...

    用户1332428
  • 图片在父容器中按比例缩放算法

    小贝壳
  • 腾讯助力北京打造文博会“云上展区”,引入国内首个AI展厅虚拟人智能客服

    ? 11月16日至20日,首次改为线上举行的第十六届中国(深圳)国际文化产业博览交易会(云上文博会)盛大开幕。 以“新业态、新消费、新场景、新引擎”为主题的北...

    腾讯文旅
  • Python 视频文件的分割和合并

    py3study
  • 互联网寒冬下,一个 Android 程序员的面试心得

    回顾一下自己这段时间的经历,九月份的时候,公司通知了裁员,我匆匆忙忙地出去面了几家,但最终都没有拿到offer,我感觉今年的寒冬有点冷。到十二月份,公司开始第二...

    Android技术干货分享

扫码关注云+社区

领取腾讯云代金券