弹性盒子布局flex菜鸟教程 flex布局怎么让盒子垂直水平居中？

flex布局怎么让盒子垂直水平居中？

我们这里分为两种形式，一种是定元素宽高的情况下，另一种是不定元素宽高的情况下。

定元素宽高的情况下

a.绝对定位 负margin

利用绝对定位absolute和margin完成元素居中，具体例子如下：

给父元素添加相对定位，子元素添加绝对定位，利用margin负子元素宽高的一半，实现元素的居中，这种方法不常用，

优点：好理解，兼容性好

缺点：必需给定子元素的宽高

b.绝对定位 margin:auto

利用absolute绝对定位和margin:auto自动居中方法完成元素的居中，例子如下：

与上例子一样给父元素加相对定位，子元素添加绝对定位，在设置元素的左、右、上、下位置为零，再利用自动居中对齐的方法margin:auto,完成元素的垂直水平居中，这种方法常用

优点：简单易懂，兼容性好

缺点：代码量大，占内存

c.table-cell

利用css的table属性，完成元素的垂直居中，margin完成元素的水平居中，例子如下

设置父元素的元素类型为table-cell类型，设置表格的垂直对齐方式为居中，再给子元素添加margin:0 auto 完成元素的垂直水平居中，这种方法不常用，

优点：兼容性好

缺点：出来的太早，现在都不流行用了

d.translate

利用2d位移来完成元素的居中，例子如下：

只需操作子元素，给子元素添加transform属性，利用2d位移translate,分别向左向右移动父元素宽高度减自身宽高度的一半，完成元素的垂直水平对齐，这种方法不常用，

优点：代码简单

缺点：我们必须给定子元素的宽和高，否则无法完成元素居中

不定元素宽高的情况下

line-heght

给元素设置line-heght,也就是行高，完成元素的居中，具体例子如下：

我们给子元素设置行高，完成元素的垂直居中，再然后利用文本水平对齐方式text-align方法，完成水平居中，这中方法是最简单的，也是我们经常用的

优点：写起来简单，兼容性好

缺点：只适合单行文本的居中，多行文本不支持

b.绝对定位加translate

之前我们说过一个利用translate完成元素垂直水平的，这里就是在那种方法上的进一步改进，也就是可以，不用设置宽高，也能实现元素的垂直水平居中，用translate加绝对定位完成元素的居中，例子如下：

在这里，还有不同就是，我们translate里面可以直接用百分比完成位移，从而实现元素的垂直水平居中，这种方法常用（但是我不常用）

优点：代码简单，兼容性好

缺点：无

c.flex

flex形成弹性盒，我们利用弹性盒可以做很多事情，其中最主要的还是布局，当然这里我们就不详细说了，我们来谈谈如何使一个元素垂直水平居中，例子如下：

我们让父元素形成弹性盒子，再然后设置主轴对齐方式为居中对齐，侧轴对齐方式为居中对齐从而完成元素的垂直水平居中，这种方法经常用，

优点：代码简单易懂

缺点：PC端兼容性不好

d.flex margin:auto

这种方法与上面那种不同的是，这里没用到弹性盒子里面的属性，而是用margin直接完成元素的居中对齐，例子如下：

让父元素形成弹性盒子，再然后给子元素添加margin:auto,完成元素的垂直水平居中，这种方法也常用，

FLExTuBE译成中文？

译成中文:根据音译FLExTuBE为菲克斯图必。（我王达肤音译的）。FLExTuBE是光纤电缆的名字。

全球最大能源和通信电缆制造商普睿司曼集团上周在澳大利亚展示了最新的光纤电缆Flextube?，这是普睿司曼又一项堪称世界第一的光缆技术，实现单根光缆含有2112根光纤。

flex是什么意思？

flex 英 [fleks] 美 [fl?ks] n. 屈曲；电线；松紧带 vt. 折曲；使收缩 adj. 弹性工作制的 vi. 弯曲；收缩 n. (Flex)人名；(意)弗莱克斯；(法)弗莱

手机网站尺寸怎么取你，比如高度，宽度，是用什么单位，比vw？

首先你要先知道有几种单位:vh:手机屏幕高度的百分比1vh=1%屏幕高度vw:手机屏幕宽度的百分比1vw=1%屏幕宽度rem:html根元素的font-size字体大小1rem=font-size这几种单位都是可以适应手机屏幕大小的最近本人做的手机版的网页，都是用的弹性盒子flex rem布局字体大小，盒子的宽高都可以用rem布局但是如果你不想你的整个页面有滚动条的话就结合flex布局flex=1让一块区域自动补全剩余空间,给部分区域使用over-folw属性

html怎么设置一个字在左一个在右一个字在中间？

进行弹性布局，设置display:flex；然后水平方向平分，justify-content:space-between;

本文 原创，转载保留链接！网址：https://licai.bangqike.com/bixun/41185.html