资讯专栏INFORMATION COLUMN

纯CSS实现元素垂直水平居中-非固定宽度

zhonghanwen / 2406人阅读

这里不讨论行内元素的居中!!

盒子垂直居中+水平居中的需求时经常遇到的,看到的较多实现逻辑是固定content-box的宽度,通过让margin-left和margin-top等于宽或高的负一半来实现,抑或不固定宽度,通过JS调整margin-left和margin-top的值,这俩种方法原理都一样。
而我接下来要讲的是content不定宽的情况下,CSS的源生实现。

利用table实现垂直水平居中

主要利用td的vertical-align: middle;属性实现垂直居中,当然你可以用display:table-cell;也可以得到一样的效果。配合margin: 0 auto;实现水平居中,支持IE 8+。
效果:https://codepen.io/FreadChen/...



利用flex实现水平垂直居中

利用flex布局可以实现更多功能,这里利用了“justify-content”实现水平居中、“align-items”实现垂直居中,“flex: 0 0 auto;”让元素保持原来的宽高。这个技术的局限在于支持IE 10+。
了解Flex请戳:http://www.ruanyifeng.com/blo...
看效果请戳:https://codepen.io/FreadChen/...



利用position + transform实现垂直居中

利用position的绝对定位absolute(absolute的使用技巧自行了解)将left和top都设为50%;再利用transform: translate(-50%,-50%);来补偿元素宽高所带来的位置影响。该技巧支持IE9+。
看效果请戳:https://codepen.io/FreadChen/...



文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/52259.html

相关文章

  • CSS实现元素垂直水平居中-固定宽度

    这里不讨论行内元素的居中!! 盒子垂直居中+水平居中的需求时经常遇到的,看到的较多实现逻辑是固定content-box的宽度,通过让margin-left和margin-top等于宽或高的负一半来实现,抑或不固定宽度,通过JS调整margin-left和margin-top的值,这俩种方法原理都一样。 而我接下来要讲的是content不定宽的情况下,CSS的源生实现。 利用table实现垂直水平...

    shusen 评论0 收藏0
  • CSS实现元素垂直水平居中-固定宽度

    这里不讨论行内元素的居中!! 盒子垂直居中+水平居中的需求时经常遇到的,看到的较多实现逻辑是固定content-box的宽度,通过让margin-left和margin-top等于宽或高的负一半来实现,抑或不固定宽度,通过JS调整margin-left和margin-top的值,这俩种方法原理都一样。 而我接下来要讲的是content不定宽的情况下,CSS的源生实现。 利用table实现垂直水平...

    Turbo 评论0 收藏0
  • 前端-CSS3&H5

    摘要:高度模型浅识为的简写,简称为块级格式化上下文,为浏览器渲染某一区域的机制,中只有和中还增加了和。并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不...

    Hydrogen 评论0 收藏0
  • 前端-CSS3&H5

    摘要:高度模型浅识为的简写,简称为块级格式化上下文,为浏览器渲染某一区域的机制,中只有和中还增加了和。并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不...

    xiaolinbang 评论0 收藏0
  • [分享] CSS完美实现垂直水平居中的6种方式

    摘要:绝对定位反向偏移完全居中方案二开发工具高性能轻架构开源免费跨端可视化效果实现原理由于偏移了父对象的高度宽度,所以需要利用反向偏移居中块的宽高。纯实现居中的各种方案就总结到这里了,码字不易,顺手点赞哈 前言 由于HTML语言的定位问题,在网页中实现居中也不是如word中那么简单,尤其在内容样式多变,内容宽高不定的情况下,要实现合理的居中也是颇考验工程师经验的。网上讲居中的文章很多,但是都...

    funnyZhang 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<