小课堂【上海】

分享人：钱小夏

目录

1.行内元素水平居中

2.块状元素水平居中

3.单行文本垂直居中-父元素高度确定 position与float

4.vertical-align 实现垂直居中

5.绝对定位实现垂直居中

6.flex布局实现水平及垂直居中的布局

1.行内元素水平居中的实现

给父元素设置 text-align:center;

通过计算padding,margin等来实现（不推荐）

2.1.定宽块状元素水平居中

设置块状元素为 inline-block 水平，父元素设置text-align：center;

设置margin:0 auto;

2.2不定宽块状元素水平居中

给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

3.单行文本垂直居中-父元素高度确定

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。
(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。

弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。

4.vertical-align 实现垂直居中

vertical-align 只对inlin-block 水平或者 inline 元素起作用

5绝对定位实现垂直居中

绝对定位配合transform实现垂直居中定位

6.flex布局实现水平及垂直居中的布局

flex实现水平垂直居中的方式非常简单，只需要设置元素在交叉轴上居中，即align-items:center;

flex设置水平方向布局适用于水平方向上两个及两个以上的元素，如果只有一个元素可以直接使用text-align或者verticl-align属性。

应用场景与拓展延伸

今天介绍的属性都非常简单，但是需要一定的熟练度，才能在布局应用时，面对不同情况，做出最优化，最简练的布局；所以我们的目标是：写最优雅的代码。

鸣谢

感谢大家观看

By 钱小夏