前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >几种居中方法

几种居中方法

作者头像
wade
发布2020-04-24 17:18:01
3560
发布2020-04-24 17:18:01
举报
文章被收录于专栏:coding个人笔记

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

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

Flex布局:

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

代码语言:javascript
复制
justify-content: center;align-items: center;
transform: translateX(-50%) translateY(-50%):

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

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

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

代码语言:javascript
复制
display: table-cell;vertical-align: middle;text-align: center;

子元素需要设置:

代码语言:javascript
复制
display: inline-block;

绝对定位:

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

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

(完)

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-04-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 coding个人笔记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档