开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

社区首页 >专栏 >day005: 让一个元素水平垂直居中，到底有多少种方案

day005: 让一个元素水平垂直居中，到底有多少种方案

用户3806669

发布于 2021-03-10 20:54:50

5980

发布于 2021-03-10 20:54:50

举报

文章被收录于专栏：前端三元同学前端三元同学

水平居中

对于 行内元素: text-align: center;
对于确定宽度的块级元素：

width和margin实现。margin: 0 auto;
绝对定位和margin-left: -width/2, 前提是父元素position: relative

对于宽度未知的块级元素

table标签配合margin左右auto实现水平居中。使用table标签（或直接将块级元素设值为display:table），再通过给该标签添加左右margin为auto。
inline-block实现水平居中方法。display：inline-block和text-align:center实现水平居中。
绝对定位+transform，translateX可以移动本身元素的50%。
flex布局使用justify-content:center

垂直居中

利用 line-height实现居中，这种方法适合纯文字类
通过设置父容器 相对定位，子级设置 绝对定位，标签通过margin实现自适应居中
弹性布局 flex:父级设置display: flex; 子级设置margin为auto实现自适应居中
父级设置相对定位，子级设置绝对定位，并且通过位移 transform实现
table布局，父级通过转换成表格形式，然后子级设置 vertical-align实现。（需要注意的是：vertical-align: middle使用的前提条件是内联元素以及display值为table-cell的元素）。

本文参与?腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2019-10-20，如有侵权请联系?cloudcommunity@tencent.com 删除

本文分享自前端三元同学微信公众号，前往查看

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

本文参与?腾讯云自媒体分享计划? ，欢迎热爱写作的你一起参与！

评论

登录后参与评论

0 条评论

热度

最新

LV.

目录

水平居中
垂直居中

相关产品与服务

容器服务

腾讯云容器服务（Tencent Kubernetes Engine, TKE）基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务，覆盖 Serverless、边缘计算、分布式云等多种业务部署场景，业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者，主导开源项目Crane，全面助力客户实现资源优化、成本控制。

产品介绍产品文档

精选特惠用云无忧