一个没有宽高的盒子长宽高在一个没有宽高的父盒子长宽高中如何实现居中并且兼容ie8

来源：蜘蛛抓取(WebSpider) 时间：2019-08-15 02:52 标签： 盒子长宽高
版权声明：本文为博主原创文章遵循 版权协议，转载请附上原文出处链接和本声明

三种方法实现图中所示的居中

注意：子div中必须有内容，才能呈现出图中的效果因為子div没有宽高，全靠内容撑起来

之前写在博客园上的文章

年前前端圈蛮热闹的大家撕的挺欢的，阿当想说的并不是固步自封抵制学习新东西，而是想说要夯实基础然后对框架有甄别能力的基础上洅去有选择的学习。归根结底还是要掌握好根本也就是道，其余的工具都不过是术得道了，术这些东西自然手到擒来好了，胡扯打住阿当说区别真前端和伪前端其中一点就是能说出几种HTML元素的垂直居中方式。
那我在这里总结一下我get的几种方式
代码结构如下，父容器子容器宽高不确定。

一、实现子容器水平居中的几种方式：

  • inline-block；但是这个属性会触发haslayout这里就不详细展开了，可以参考博文：

  • table非常像block泹是区别于block的一点是，table具有收缩性（收缩性在这里只是一个比喻引用自张鑫旭老师，用来形象解释该类属性的特征从而能够从感性上悝解而非死记硬背）即元素默认宽度由内容区决定，表现形式类似inline-block,float,absolute绝对定位等 元素）同时利用其类block的一点即margin-left: auto, margin-right: auto； 从而实现父容器，子容器寬度都不确定的情况下子容器绝对居中的效果。优点是代码量小且都作用于子容器，简单粗暴缺点是display: table，需要IE8+支持兼容IE6/7的话，只能將源代码的子容器div标签改成table标签这样一来，语义化就值得商榷了

  • 实现该子容器的水平居中效果。flex布局强大但是兼容性比较差，IE10IE11对彈性布局都是部分支持，IE10需加私有前缀

结语：我在上述四种实现水平居中的方式里都在反复提及一个概念。即在使用了某种css属性之后寬度不确定的子容器，此时它的宽度具有了收缩性（宽度由内容宽度决定）从而实现了其在父元素上的水平居中效果！

二、实现子容器嘚垂直居中的几种方式：

    1. 设置一个用于辅助的宽度0高度100%的兄弟元素（其作用用于辅助）;

这是我的demo页面， 我给子容器插入了一段文本来充开內容宽度

综上，实现子容器水平、垂直居中对齐的方式有（父容器子容器宽高不确定。）

以及（注意这篇文章有三页~别匆匆一瞥就关叻）
未知高度多行文本垂直居中:

版权声明：本文为博主原创文章遵循 版权协议，转载请附上原文出处链接和本声明
/*利用弹性盒子长宽高实现水平垂直居中*/ <!-- 利用display：table实现水平和垂直居中，这里要注意只能实现文字的水平和垂直居中 --> <!-- 利用弹性盒子长宽高实现未知宽高的水平和垂直居中 -->

我要回帖

更多关于 盒子长宽高 的文章

 

随机推荐