CSS居中

Demo：
https://github.com/xuekeven/learn_web/blob/main/dome/CSS/居中_元素水平居中.html 。
https://github.com/xuekeven/learn_web/blob/main/dome/CSS/居中_元素垂直居中.html 。
https://github.com/xuekeven/learn_web/blob/main/dome/CSS/居中_元素水平垂直居中.html 。

文本居中

• 针对 单行文本水平居中 ，对文本的最近的块级祖先元素设置text-align: center
• 针对 单行文本垂直居中 ，对文本的最近的块级祖先元素设置line-height === height
• 针对 多行文本水平居中 ，将其包装为块级元素，使用块级元素的水平居中方法
• 针对 多行文本垂直居中 ，将其包装为块级元素，使用块级元素的垂直居中方法

元素居中

水平居中

要水平居中，说明子元素不能填满父元素宽度，说明父元素是块级元素（前后有换行符），因为对行内元素设置宽度无效。

子元素有两种情况：行内元素和块级元素。当子元素是行内元素时，对行内元素设置宽度是无效的；当子元素是块级元素时，其默认继承父元素 100% 宽度，但是要居中，说明给子元素设置了宽度。

text-align

针对子元素是行内元素或行内块级元素，行内元素设置宽度无效。

对父元素设置text-align: center

定位 + calc()

针对子元素是块级元素， 知道 子元素宽度。

对父元素设置position: relative
对子元素设置position: absolute; left: calc(50% - width/2)

定位 + 负 margin

针对子元素是块级元素， 知道 子元素宽度。

对父元素设置position: relative
对子元素设置position: absolute; left: 50%; margin-left: - width/2

margin

针对子元素是块级元素， 不知道 子元素宽度。

对子元素设置margin: 0 auto

定位 + margin

针对子元素是块级元素， 不知道 子元素宽度。

对父元素设置position: relative
对子元素设置position: absolute; left: 0; right: 0; margin: 0 auto

定位 + transform

针对子元素是块级元素， 不知道 子元素宽度。

对父元素设置position: relative
对子元素设置position: absolute; left: 50%; transform: translate(-50%, 0)

弹性布局

针对子元素是块级元素， 不知道 子元素宽度。

对父元素设置display: flex; justify-content: center

网格布局

针对子元素是块级元素， 不知道 子元素宽度。

对父元素设置display: grid; justify-content: center；或者
对父元素设置display: grid; justify-items: center；或者
对父元素设置display: grid;、对子元素设置justify-self: center

垂直居中

要垂直居中，说明子元素不能填满父元素高度，说明父元素是块级元素（前后有换行符），因为对行内元素设置高度无效。

子元素有两种情况：行内元素和块级元素。当子元素是行内元素时，对行内元素设置高度是无效的；当子元素是块级元素时，其会默认高度为 0，但是要居中，说明给子元素设置了高度或者子元素自身内容的高度无法满足父元素的高度。

vertical-align

• 针对子元素是行内元素或行内块级元素，行内元素设置高度无效。
  该属性控制着子元素在行内的垂直对齐，想要使用该属性生效，需要该行内的所有元素都设置该属性。

利用 ::before 或 ::after 添加伪元素到父元素下，并设置伪元素height: 100%; width: 0; content: ' '; display: inline-block; vertical-align: middle，然后父元素的所有子元素设置vertical-align:middle，就可以让子元素都垂直居中。不过需要所有子元素都为行内元素，即 display 为 inline 或 inline-block。

• 针对子元素是表格单元格，设置高度无效。
  该属性控制着表格单元格内的内容在单元格内的垂直对齐。

display: table-cell会使元素表现类似一个表格中的单元格 td，这个特性可以实现文字的垂直居中效果。同时它也会破坏一些 CSS 属性，使用 table-cell 时最好不要与 float 和position: absolute一起使用，设置了 table-cell 的元素对高度和宽度高度敏感，对 margin 设置无效，可以响应 padding 设置，表现几乎类似一个 td 元素。

定位 + calc()

针对子元素是块级元素， 知道 子元素高度。

对父元素设置position: relative
对子元素设置position: absolute; top: calc(50% - widht/2)

定位 + 负 margin

针对子元素是块级元素， 知道 子元素高度。

对父元素设置position: relative
对子元素设置position: absolute; top: 50%; margin-top: - width/2

定位 + margin

针对子元素是块级元素， 不知道 子元素高度。

对父元素设置position: relative
对子元素设置position: absolute; top: 0; bottom: 0; margin: auto 0

定位 + transform

针对子元素是块级元素， 不知道 子元素高度。

对父元素设置position: relative
对子元素设置position: absolute; top: 50%; transform: translate(0, -50%)

弹性布局

针对子元素是块级元素， 不知道 子元素高度。

对父元素设置display: flex; align-items: center；或者
对父元素设置display: flex、对子元素设置align-self: center

网格布局

针对子元素是块级元素， 不知道 子元素高度。

对父元素设置display: grid; align-content: center；或者
对父元素设置display: grid; align-items: center；或者
对父元素设置display: grid、对子元素设置align-self: center

水平垂直居中

定位 + calc()

针对子元素是块级元素， 知道 子元素高度和宽度。

对父元素设置position: relative
对子元素设置position: absolute; top: calc(50% - widht/2); left: calc(50% - width/2)

定位 + 负 margin

针对子元素是块级元素， 知道 子元素高度和宽度。

对父元素设置position: relative
对子元素设置position: absolute; top: 50%; left: 50%; margin: -height/2 0 0 - width/2

定位 + margin

针对子元素是块级元素， 不知道 子元素高度和宽度。

对父元素设置position: relative
对子元素设置position: absolute; top: 0; left: 0; top: 0; bottom: 0; margin: auto

定位 + transform

针对子元素是块级元素， 不知道 子元素高度和宽度。

对父元素设置position: relative
对子元素设置position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)

弹性布局

针对子元素是块级元素， 不知道 子元素高度和宽度。

对父元素设置display: flex; justify-content: center; align-items: center；或者
对父元素设置display: flex; justify-content: center、对子元素设置 align-self: center

网格布局

针对子元素是块级元素， 不知道 子元素高度和宽度。

对父元素设置display: grid; justify-content: center; align-content: center；或者
对父元素设置display: grid; justify-items: center; align-items: center；或者
对父元素设置display: grid、对子元素设置justify-self: center; align-self: center；或者
其它六种组合方式