摘要：结构如下实验结果如下实现了子元素的水平垂直居中，同时可观察到两张图溢出的方式不同绝对定位的溢出或或的溢出
1.绝对定位，利用负边距
利用负边距实现子元素居中(相对于父元素(position:relative))，需已知子元素的width与height；且把子元素的position设为absolute，绝对定位；以及设置left和top为50%；再加上负边距，margin-left值为width的一半，同样的，margin-top值为height的一半。
我们来理解一下，绝对定位的子元素，通过自身的边界来相对于父元素进行定位，这个边界就是margin，当我们设置了left和top各为50%时，子元素左边界距父元素左边界50%,上边界距父元素上边界50%，其实此时，我们可以知道，子元素的左上角这个点，是水平垂直居中的，当我们设了负边距时，我们可以理解为这个子元素向右向上各移了自身长度的一半，这就达到了水平垂直居中。当然我们也可以这么理解，其实真正相对于父元素来定位的点就是子元素左上角的点，当我们设了负边距，子元素的中心点就取代了它左上角的点，若希望子元素能水平垂直居中，这时只需再设left和top各为50%时便可。
代码如下：
使用绝对定位方式, 以及left:0;right:0;top:0;bottom:0;margin:auto
当我们为子元素设置left:0;right:0;top:0;bottom:0;时，浏览器将给子元素重新分配一个边界框，此时子元素将填充其父元素的所有可用空间，当我们给子元素设置一个width或height，防止子元素占据所有的可用空间，浏览器将根据新的边界框重新计算，再加上margin:auto,由于被绝对定位，脱离了正常的文档流，浏览器会给margin-left,margin-right相同的值，margin-top,margin-bottom相同的值，使元素块在父元素中水平垂直居中。
代码如下:
Flex布局即为弹性布局，只需将父元素设置三个属性即可(display,justify-content,align-items)
代码如下：
CSS3中新增的transform属性, 代码如下：
5.Table模拟表格效果:
总结1.利用负边距方法优点是具有良好的跨浏览器特性，兼容IE6/IE7，但是缺点是不能自适应，需设置子元素的宽高，不支持百分比，且负边距值与padding和是否定义box-sizing: border-box有关，计算需要根据不同情况。
2.利用margin:auto方法支持跨浏览器，支持百分比，但是必须声明子元素的width或height(至少一项，不然会占据父元素所有空间)。
这两种绝对定位方法，可在子元素中，设置overflow:auto来防止内容越界溢出。
3.利用flex或transform方法的好处是代码量少，且你不用设置子元素的width与height,内容可由子元素里的子元素任意撑开，优雅地溢出。但flex IE8/IE9不支持，transform IE8不支持，且属性需要写浏览器厂商前缀。
4.table方法的好处是没有空间的限制，可以根据元素内容动态的改变高度，素的内容不会因为没足够的空间而被切断或者出现难看的滚动条。但在IE6-7下无法正常运行，结构也更复杂。
5.html结构如下:
6.实验结果如下：(实现了子元素的水平垂直居中，同时可观察到两张图溢出的方式不同)
绝对定位的溢出(overflow:auto)：
flex或transform或table的溢出：
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112696.html
摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。 简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...
摘要：水平居中行内元素解决方案适用元素文字，链接，及其其它或者类型元素，，部分代码文字元素链接元素链接元素链接元素部分代码解决方案将元素包裹在一个属性为的父级元素中如设置这个父级元素属性即可现在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行内元素解决方案 适用元素：文字，链接，及其其它inline或者inline-*类型元素（inline-block，inline-table，i...
摘要：水平居中行内元素解决方案适用元素文字，链接，及其其它或者类型元素，，部分代码文字元素链接元素链接元素链接元素部分代码解决方案将元素包裹在一个属性为的父级元素中如设置这个父级元素属性即可现在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行内元素解决方案 适用元素：文字，链接，及其其它inline或者inline-*类型元素（inline-block，inline-table，i...
摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。 简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...
摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。 简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...
摘要：源代码演示利用将要水平排列的块状元素设为，然后在父级元素上设置，达到与上面的行内元素的水平居中一样的效果。 前言 本文主要介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思维导图，请猛戳Github个人博客 一、水平居中 1.行内元素水平居...
阅读 2812·2021-11-12 10:36
阅读 4208·2021-09-22 10:57
阅读 1240·2021-09-22 10:53
阅读 2337·2019-08-30 15:55
阅读 3373·2019-08-29 17:00
阅读 3248·2019-08-29 16:36
阅读 2354·2019-08-29 13:46
阅读 1235·2019-08-26 11:45
