许多方法可以将HTML元素与CSS对齐，但是一起使用或单独使用它们并不是那么容易。开发人员所面临的困难之一就是试图将元素集中在页面中间。

因此，在本文中，我将展示一些最常用的方法，即通过使用不同的CSS属性在水平和垂直方向上居中图像。

水平居中

让我们开始使用3个不同的CSS属性将图像水平居中。

文字对齐

使图像水平居中的第一种方法是使用text-align属性。但是，仅当图像位于块级容器（例如<div>）内时，此方法才有效：

Margin: Auto

使图像居中的另一种方法是使用margin：auto属性（用于左边距和右边距）。但是，单独使用margin：Auto将不适用于图像。如果需要使用margin：auto，则还必须使用2个其他属性。

margin-auto属性对内联级别的元素没有任何影响。由于<img>标签是一个内联元素，因此我们需要先将其转换为块级元素：

其次，我们还需要定义宽度。因此，左右边缘可以占用其余的空白空间并自动对齐，可以这样解决问题（除非我们给出100％的宽度）：

Display: Flex

将图像水平居中的第三种方法是使用display：flex。同样，我们对容器使用text-align属性，它也会使用display：flex。但是，仅使用display：flex是不够的。容器还必须具有一个称为justify-content的附加属性。

justify-content属性与display：flex一起使用，我们可以使用它水平放置图像的中心。最后，图像的宽度必须小于容器的宽度，否则，它会占用100％的空间，然后我们就无法对其进行集中化。

垂直居中放置图像

1、Display: Flex

对于垂直对齐，使用display：flex确实很有帮助。考虑到我们的容器的高度为800px，但图像的高度仅为500px：

现在，在这种情况下，向容器中添加一行代码（align-items：center）就可以了：

如果将align-items属性与display：flex一起使用，就会将元素垂直放置。

2、位置：绝对和变换属性

垂直对齐的另一种方法是一起使用position和transform属性。这个有点复杂，所以让我们一步一步地做。

步骤1：定义绝对位置

首先，我们将图像的定位行为从静态更改为绝对：

同样，它应该位于相对放置的容器内，因此我们添加一个位置：相对于其容器的div。

步骤2：定义顶部和左侧属性

其次，我们定义图像的顶部和左侧属性，并设置为50％。这会将图像的起点（左上角）移到容器的中心：

步骤3：定义变换属性

在第二步的时候已经将图像的一部分移出容器。因此，我们需要将其取回内部。在图像上定义转换属性，并在其X和Y轴上添加负50％可以达到目的：

还可以使用其他方法进行水平和垂直居中，我这里只尝试了最常用的方法。希望这篇文章可以帮助你了解如何在页面中心对齐图像。

天我们来聊一聊CSS文本两端对齐。

事情的起因是这样的，在Review一位同事做的页面时，发现好几处字符之间写了很多空格，于是问他为什么这么做，他说设计要求这几个文本的呈现宽度必须一致，但它们的字符个数又不同，所以就在字符数少的文本中添加空格从而达到文本两端对齐（字符均匀分布）的效果，于是我对他表示了侮辱性的赞美。

用添加空格符的方式实现文本两端对齐，除了不够优雅，容易被羞辱之外，还有其他三个问题：

1. 不同的浏览器，不同的移动设备，对空格符的展示宽度是有细微差别的，一个空格看不出影响，但是多个空格就无法保证一致了，很有可能出现没对齐或者折行的情况。

2. 任何页面都避免不了修改，如果文本需要更换，并且更换后字数发生变化，这将意味着之前的空格数量需要重新调整，非常不利于维护。

3. 某些页面上的文本，用户可能会去复制，但复制下来后发现含有很多空格符，仍需要二次编辑。

因此在日常开发中要避免使用空格符来实现两端对齐，而应该使用标准的CSS文本对齐属性来解决。

CSS文本对齐属性 text-align

这个属性大家经常用到的值有三个：

left：左对齐

right：右对齐

center：居中对齐

它还有一个属性值：justify，表示文本两端对齐，也就是让文本在固定宽度内平均分布，使两边不会出现空白。那么用这个属性是否就能很好的实现文本两端对齐呢？

通过测试发现，单行文本通过text-align:justify; 并不能实现两端对齐，为什么会出现这个情况？我们需要先了解一点点排版知识。

传统书刊的排版印刷对于整个自然段通常采用两端对齐的方式，这样就保证了排版的美观和良好的阅读体验。但是自然段的最后一行文字是左对齐的，因为最后一行文本意味着段落的结束，没有必要继续两端对齐了。

细心的朋友应该已经猜到了，在我们测试中，文本只有一行，意味着它也是最后一行，而CSS的文本对齐方式也遵循最后一行文本默认左对齐的原则，因此不能实现两端对齐。

好在CSS为我们提供了另外一个属性：text-align-last，这个属性用来额外设置段落最后一行文本的对齐方式，因此对于单行文本，我们只需要设置：text-align-last: justify;就可以了，亲测有效。

TIPS：单行文本要想实现文本两端对齐，除了上面说的方式，一定别忘了这个文本需要一个确定的宽度，不设置宽度，文本也就不存在两端。因此这个单行文本不能是行内布局，而应该是块级或者是行内块级布局。

好景不长，用上面的方式实现了文本两端对齐后，发现它只是在PC上有效，但是在IOS的系统浏览器里毫无效果，最后发现在IOS上不支持text-align-last这个属性，因此这个方式并不稳妥。

那么如何解决IOS的兼容问题呢？

着手点只有一个，那就是如何保证单行文本对于CSS来说并不是最后一行？这句话看似很奇怪，其实解决办法很简单，只需要给这个单行文本添加一个伪元素after即可。

someClass: after { content: “”}

由于添加了伪元素，单行文本不再是最后一行，伪元素才是， 同时伪元素的内容为空字符串，并不会对显示造成影响，因此完美解决了这个问题。

注意：伪元素after不仅要设置content，还要添加 width:100%; 和 display:inline-block; 这是因为：如果不设置宽度，伪元素内容并不会成为第二行，如果display设置成block，又造成了伪元素变成了另一个块级元素，所以要设置为inline-block。

最终的代码：

someClass {text-align:justify; width:300px;}

someClass: after { content: “”; width:100%; display:inline-block;}

先，我们来学习CSS设置文本的对齐方式。

通过CSS，可以设置文本的水平和垂直对齐方式。（有案例的效果演示）

文本水平对齐，我们前面的课程曾经接触过——使用 text-align 这个样式属性来实现。它的属性值有三个：left，right，center，分别表示文本水平居左，居右，居中。

我们来举个例子。

在 005 目录下创建 alignment-spacing.html 文件，构建基础代码，添加一个 h1 元素和三个 p 元素，分别填入一些文本。

<h1>浠浠呀老师，学前端的大专生就业难吗？</h1>

<p>

no, 不难，只要你能力过关、项目经验过关、人品过关，企业就会录用你。

</p>

<p>

你可以在面试的时候，着重介绍一下你的开发能力、技术能力以及你对技术理解，让别人挑不出毛病，那学历这块是可以自动忽略的。

</p>

<p>

我在面试别人的时候也是这样，如果这个人的技术能力和过往经验真的征服了我，我不是很在他乎他的学历。

</p>

我们可以给三个段落文本，设置不同的水平对齐方式，给三个 p 元素定义 class 属性，值分别为 a，b，c。

在这个目录下再创建一个 mystyle-2.css 文件，定义 p.a (读作p点a) 选择器，声明样式 text-align: left (不要读冒号)。定义 p.b 选择器，声明样式 text-align: center。定义 p.c 选择器，声明样式 text-align: right。

p.a {

text-align: left;

}

p.b {

text-align: center;

}

p.c {

text-align: right;

}

在浏览器中预览效果，三个段落分别左、中、右对齐了。

当 text-align 属性被设置为 justify [ˈdʒʌstɪfaɪ]时，每一行都被拉长，使每一行都有相等的宽度，而且左右边界是对齐的，就像杂志和报纸排版一样。

注释掉全部样式，定义 p 选择器，声明样式 text-align: justify。

我们看，貌似没有什么效果。

为了演示，给第一个段落添加单词 no, (读作no 英文的逗号) 。再给 p 元素声明一个样式 width: 200px。

再看效果，三个段落的两侧都是对齐的。

假如注释掉这个样式，

很明显，右侧不再对齐显示了。

除了水平对齐，还可以设置文本的垂直对齐。通过声明 vertical-align 属性来实现。值有五个：

baseline，基线对齐。

text-top，文本顶部对齐。

text-bottom，文本底部对齐。

sub，下角标对齐。

super，上角标对齐。

在 html 文件中添加一个 h1 元素，5个 p 元素。填入一些文本。在每个段首添加一个 img 元素，引入本地的一个小图片，图片的宽高都为 9px。给每个图片元素定义 class 属性，值分别为 a，b，c，d，e。

在样式表中，定义 img.a 选择器，声明样式 vertical-align: baseline。

baseline 是如何对齐的呢？看效果，在垂直方向好像是居中对齐。

实际上，baseline 是基于四线三格倒数第二行对齐的。对于英文文本才有意义。

比如，将 1 修改为 fight 1。

基线在这，文本中的图片就基于它来对齐。

再定义 img.b，img.c，img.d，img.e 四个选择器，给他们都声明 vertical-align 属性，值分别为 text-top，text-bottom，sub，super 。

看看效果，图片垂直方向上，已经相对于文本顶部、底部、上角标、下角标的位置对齐了。

接下来，我们学习如何设置文本的间距。

通过 CSS，可以实现文本缩进、文字或字母间距、行高、单词间距和处理空白。（有案例的效果演示）

聊起文本缩进，你还记得以前是如何实现自然段首行缩进的吗？可以发弹幕告诉大家！

通过声明 CSS 的 text-indent 属性也可以实现。使⽤长度值或百分⽐来设置⽂本缩进。

长度值可以使⽤绝对单位或相对单位。绝对单位就是 px，比如缩进 50px；相对单位最常用的是 em，缩进的宽度为字符宽度的倍数，一般设置为 2em，就是空两格。

字符宽度——如果是中文方块字，也可以称为字体大小，它是通过 font-size 属性来设置的，这个属性在后面 CSS 字体课程中会详细介绍。

百分⽐缩进宽度，是根据⽗元素的宽度计算得到。这个很少使用。

给 p 元素声明 text-indent 属性，值为 2em。

仔细观察，每个自然段缩进貌似不是2个字的宽度，这是为什么呢？

你应该想到了，把 text-align: justify 注释一下，就是我们要的效果了。

letter-spacing 属性用于指定中文文字或英文字母之间的空隙。

在样式中，定义 h1 选择器，声明样式 letter-spacing: 5px。

这样，标题文字间就有了 5px 的空隙。

line-height 属性用于指定行与行之间的高度，也就是行高。属性值常用的有三个：

第一，normal，也是默认值，浏览器会根据字符大小自动设置一个行高。

第二，一个数字，比如 1.5。此数字与当前的字符大小相乘计算得到。推荐使用。

第三，绝对值，比如 20px，-5px。设置固定的行间距。

在没有设置 line-height 属性时，我们看到每一行的间距是这样的。

回到样式代码，给 p 元素声明样式 line-height: normal。

我们看到效果没有变化。

修改 line-height 属性值为 1。

再来看，每个段落的行间距消失了。

再次修改 line-height 为 10px，行与行之间叠加到了一起。

是不是和你理解的行高不一样呢？看来，我们得需要仔细研究一下：行高到底是如何计算的。

这是两行中文和英文混合的文本。

在文字顶端画一条线，取名叫顶线。在文字底端画一条线，取名叫底线。在文字中间画一条线，取名叫中线，再画一条英文的基线。上一行文字的底线，到下一行文字的顶线，他们之间的空隙称为行距。

实际上，line-height 设置的行高值，是两行基线的距离。

这里你可能会问，基线不是英文文本才有的吗？其实，不管文本里有没有英文，基线都是一直存在的。

了解了这个原理，你就能理解 line-height: 1，为啥没有行距了。因为 1 乘以文字的高度，结果还是文字的高度。而文字的高度，恰好等于两行基线之间的距离，所以行距为 0。

word-spacing 属性用于指定文本中单词的间距，只对英文有效。

给 p 元素再声明一个 word-spacing: 20px 样式。

我们看，单词 no 和 fight 后面就有了 20个像素的间距。

white-space 属性指定了如何处理元素内部的空白。有一个常用的值，nowrap，不管包含文本的元素宽度是多少，文本都不会换行，直到遇见 <br> 标签为止。

给 p 元素再声明一个 white-space: nowrap 样式。

此时，每个段落都在一行显示了。虽然我们给 p 元素声明了 width: 200px，他也会视而不见，继续倔强的在一行显示。

文章配套视频链接：https://www.bilibili.com/video/BV1oU4y1278g?p=63