垂直水平居中强化复习

垂直水平居中强化复习

**   **

**    单行文本垂直居中**

**  **      容器的高度和行高一样

height:80px

line-height:80px

图片和文字居中对齐，设置图片的基线，vertical-align:middle

单行文本的水平居中：text-align:center

一块内容垂直居中

给容器（需要居中元素的父元素）设置

display:table-cell

vertical-align:middle

引入一个问题，容器的宽度会变成内容的宽度

解决办法，给内容设置宽度。

一块内容的水平居中

**    ****   ** 首先居中的元素的宽度要比容器小

margin:auto

width:设置一个值。

有时候发现没生效，检查内容是不是在居中的元素的中间，内容的宽度和居中的元素的宽度一样。

定位的元素用 margin:auto 居中失败。

定位的元素垂直居中，**垂直****居中就要设置高度，没有高度就不存在垂直居中。**

position:absolute;

height

margin: auto 0;

top:0

bottom:0

定位的元素水平居中，水平居中就要设置宽度，没有宽度就不存在水平居中。

position:absolute

width

margin:0 auto ;

right:0;

left:0

** ****    定位的元素水平垂直居中：高度宽度都需要设置。**

**    ****    **    **    ****   ** position:absolute

width

height

margin:auto(auto auto)

top:0

bottom:0

right:0

left:0

top,bottm,right,left,上下左右，对应设置为 0,就相当于拉伸了外边框。也就是用外边框把内容挤压到了居中或垂直的位置。

然后就是用 margin 的 auto 参数自适应上下左右的高宽

另外一种垂直方法，容器中只有一块内容需要垂直居中：

给容器设置：

display:flex

align-items:center

先设置父相子绝后，子元素上设置

left: 50%;

//偏移自己的 50%

transform: translateX(-50%);

浮动：

竖着排变横着排

注意，清除浮动塌陷，父元素设置高度

定位

元素重叠

注意：父相子绝

行内元素垂直方向是 padding 是不占空间的