几种居中方法

页面布局,居中是绝对少不了的,居中的方法有很多,今天分享几个。

Margin 0 auto、text-align:center、line-height这几个就不用多说了,适合文字、图片和块元素水平居中。如果知道容器高度或者是内容高度,很容易就能实现简单的居中。

Flex布局:

弹性布局,会使用的绝对非常建议使用这个布局,现在兼容性也好,要是非得兼容很低版本的浏览器,这个布局还是得考量一下。两个居中属性

justify-content: center;align-items: center;
transform: translateX(-50%) translateY(-50%):

我们不知道容器宽高或者是内容宽高的时候,设定margin: 50%;然后使用transform的translated,这个属性的单位不是具体的像素单位的时候,百分比就是以自身的宽高计算的。一般都是配合定位使用。

display:table-cell,使用表格属性:

通过表格属性去居中,父元素:

display: table-cell;vertical-align: middle;text-align: center;

子元素需要设置:

display: inline-block;

绝对定位:

知道内容元素的宽高,设置top和left都是50%,这时候设置margin-top和margin-left内容元素宽高的一半,就能居中。

不知道宽高的情况下,设置top、left、right、bottom都设置0,然后margin: auto;也能居中。

(完)

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-04-09

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 链式调用this

    jQuery在JavaScript库中的一哥地位是不可撼动的,虽然随着这几年框架的崛起和一些大平台移除了jQuery的依赖,但不可否认jQuery还是前端开发必...

    wade
  • JavaScript深拷贝和浅拷贝

    在JavaScript中操作数据的时候,基础数据类型还好,不管是我们怎么赋值修改都不会有什么问题,但是如果我们操作的是数组或者Object,那很容易出现修改了一...

    wade
  • 对自适应的一些理解

    最近公司在招人,对于移动端自适应的问题大部分回答的都不在我认为的答案。今天说一下自己对移动端自适应的理解,有错欢迎指正。

    wade
  • 机器学习 学习笔记(13)聚类

    在无监督学习中,训练样本的标记信息是未知的,目标是通过对无标记训练样本的学习来揭示数据的内在性质及规律,为进一步的数据分析提供基础,此类学习任务中研究最多、应用...

  • 开源PaaS Rainbond 3.6.1 Released

    本次3.6.1版本更新,重点修复了3.6.0版本部分情况下会出现的BUG,同时改进了内部市场、参数验证、历史消息等功能,详细更新记录如下——

    Rainbond开源
  • 【开源程序】开源| DSLib是用Matlab编写的支配集(DS)开源实现,可应用到聚类、图匹配、分割、分类和医学影像等方面

    论文地址:http://arxiv.org/pdf/2010.07906v1.pdf

    CNNer
  • 英伟达帮助开发人员通过合成数据训练和完善他们的深度网络

    手工注释训练数据既费力又耗时。这意味着,针对计算机视觉任务的深度网络训练通常需要大量标记的训练数据,这可能既昂贵又难以获取。为了让深度学习变得更容易获取,英伟达...

    GPUS Lady
  • 可穿戴技术的前景与隐忧

    可穿戴设备已经迅速地由幻想变成了极客们的流行风尚,而且正在演变成为继平板电脑之后的下一波大潮。尽管很多人还在嘲笑谷歌眼镜,但是从今年消费电子展(CES)的情况来...

    机器人网
  • TCP协议—三次握手四次挥手的原理<转> 三次握手四次挥手的原理

    TCP是面向连接的,无论哪一方向另一方发送数据之前,都必须先在双方之间建立一条连接。在TCP/IP协议中,TCP 协议提供可靠的连接服务,连接是通过三次握手进行...

    飞天小子
  • SAP Spartacus store里引用的library是如何编译出来的

    看一个基于SAP Spartacus library开发的storefront Angular应用的依赖:

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券