bootstrap4使得div居中_css元素居中指南，细节决定成败

一、元素分类

首先要知道元素分三种：内联元素(行内元素)、块级元素、内联块级元素。

1、内联(行内)元素

• 可与其他元素占一行
• 高、行高、内外边距不可更改
• 宽度为内容所占宽度，不可更改
• 容纳文本或其他行内元素

2、块级元素

• 独占一行
• 高、行高、内外边距可更改
• 不设置宽度的话宽度默认为容器的100%
• 可容纳行内元素和块级元素

3、内联块级元素

• 可与其他元素在一行
• 高、宽、行高以及上下边距可更改

常见内联(行内)元素：

• a - 锚点
• b - 粗体
• br - 换行
• cite - 引用
• code - 计算机代码
• em - 强调
• i - 斜体
• img - 图片
• input - 输入框
• label - 表格标签
• span - 常用内联容器，定义文本内区块
• strike - 中划线
• strong - 粗体强调
• sub - 下标
• sup - 上标
• textarea - 多行文本输入框

常见块级元素：

• address - 联系方式
• audio - 音频
• vedio - 视频
• article - 文章
• blockquote - 块引用
• div - 文档分区
• form - 表单
• section - 页面区段
• h1 - 大标题
• h2 - 副标题
• h3 - 3级标题
• h4 - 4级标题
• h5 - 5级标题
• h6 - 6级标题
• hr - 水平分隔线
• header - 页头
• menu - 菜单列表
• ol - 排序列表
• ul - 非排序列表
• p - 段落
• table - 表格

常见的内联块级元素有：

• img - 图片
• input - 输入

比如：

img{display: inline-block;}

二、水平居中

1、内联元素水平居中

(1)父级为块级元素的内联元素使用text-align: center

p{ background-color: cyan; text-align: center;}

我是内联文本

可以看到块级元素p是默认宽度是整个容器的100%，并且其容纳的文本是内联元素，使用text-align: center让其水平居中。

text-align: center仅对内联元素有效，包括内联块级元素。比如对inline, inline-block, inline-table, inline-flex的元素同样有效，因为inline-block值将内部div显示为嵌入式元素和块，因此外部div中的属性text-align将内部div居中。

2、块级元素水平居中

(1)单个块使用margin: 0 auto

有时需要居中的不是文本，而是整个块。我们希望左右边距相等，方法是将边距设置为“auto”。

这通常用于固定宽度的块，如果块本身是灵活的，它将占用所有宽度，当然，居中效果可能就不明显了，因为它占了整个宽度。

无论正在居中的块级别元素或父元素的宽度是多少，这都是有效的。

.block { width: 200px; margin: 0 auto; background-color: aquamarine;}

我是一个块，设宽度可见居中效果，不设宽度占满整个可用宽度

web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法(详细的前端项目实战教学视频，PDF)

(2)父级为块级元素的块级元素水平居中

1)使用table布局加左右边距自适应

因为块级元素设为表格布局之后，将块级变为了内部单元格

.child-3 { display: table; margin: 0 auto;}

块级元素(display:table) + (margin:0 auto)

2)多个块级元素在一行居中

当想让多个块级元素在一行内居中时，有两种办法：

第一种：将块级元素变为内联块级元素：display: inline-block

当把多个块级元素变为内联块级元素时，就可以使用内联元素居中的