CSS-对齐

重要！前言必读！

本章节主要学习的是css的对齐，注意！此对齐的代码并不是对齐，而是使用某一个属性和属性的值可以使用元素达到对齐的效果而已。css对齐分别有：元素居中对齐（margin：auto）、文本居中对齐（text-align：center）、图像居中对齐（margin-left-auto和margin-right：auto，并设置为块元素（display：block））、元素对齐（position：absolute）、浮动对齐（float：right）、垂直对齐（padding）、垂直水平居中（padding和text-align：center或line-height或position 和 transform或Flexbox）。

元素居中对齐：margin：auto

注意！margin：auto是一种用于水平居中元素的常见方法，margin是外边距，auto是代表浏览器会自动计算并分配左右外边距，从而使元素在其父容器中水平居中，使用此属性和属性的值可以使元素显示为居中对齐，要注意元素居中对齐：margin：auto要指定宽度，指定宽度后，剩余空间才将在两个外边距之间平均分配，达到居中对齐的效果。

代码图

效果图

---

文本居中对齐：text-align：center

注意！text-align：center是用于设置文本水平对齐方式的属性，text-align是水平对齐方式的意思，center是居中的意思，常见的值有文本左对齐（text-align：left）、文本右对齐（text-align：right）、居中对齐（text-align：center），这里只讲解文本居中对齐，文本对齐是指文本的对齐方式显示在哪个位置，是左侧还是右侧还是居中。

代码图

效果图

---

图像居中对齐：margin-left-auto和margin-right：auto，并设置为块元素（display：block））

注意！图像居中对齐是通过设置图像的左右外边距设置为auto，并且把图像设置为块元素display：block,两者配合使用，可以使图像达到居中对齐的效果。

代码图

效果图

---

元素对齐：position：absolute

注意！position：absolute是一种用于设置元素定位的属性，position常见的值有static、relative、absolute、fixed、sticky，详细请去css-定位那章节学习，本次只讲解使用position：absolute使元素对齐，absolute是元素相对于其最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于初始包含块进行定位（通常是浏览器窗口）。

代码图

效果图

---

浮动对齐：float：right

注意！float：right是控制元素向什么方向浮动的属性，float是浮动，right是向右的意思，float：right是元素向右浮动，浮动的常见的值有：向左浮动（默认，float：left）、向右浮动（float：right），本次只讲解使用浮动属性达到对齐的效果，左右浮动使用同理。

代码图

效果图

---

垂直对齐：padding

注意！垂直对齐可以通过使用padding属性的值来使元素达到垂直对齐的效果。

代码图

效果图

---

垂直水平居中：padding和text-align：center或line-height

注意！垂直水平居中可以使用padding和text-align：center或line-height属性来使用元素垂直水平居中。

代码图

效果图

---

垂直水平居中：position 和 transform

注意！垂直水平居中可以通过使用position 和 transform属性来使元素显示为垂直水平居中效果。

代码图

效果图

---

垂直水平居中：Flexbox

注意！Flexbox是 CSS 中用于创建 Flexbox 布局的属性，是一种布局模型，能够提供更加灵活的、自适应的布局方式，尤其适用于构建水平和垂直方向上的复杂布局结构，垂直水平居中可以通过使用Flexbox将元素显示垂直水平居中的效果。

代码图

效果图