本文最新内容将在GitHub上实时更新。 欢迎关注我的GitHub，一起上手，共同推进后端。
前言
老板手机收到红包，为什么红包不在中央？
如何使子元素在父容器中水平和垂直居中？ 这个问题一定要测试一下，在实战开发中也应用得很多。
您也许可以手动编写多个实现。 然而，大多数人的写作风格还不够规范，经不起反复考验。 换句话说：那些人只是在笔试的时候说说而已，但真正上战场的时候，却不敢这样写，也不知道怎么写最靠谱。
在这篇文章中html居中代码，我们列出几种常见的写作方式，你最终会明白哪种写作方式是最高尚的。
其实我就拿出实际应用中的真实场景来举例，让大家体验一下标准垂直居中的魅力。
如何使内联元素（文本、图片等）水平和垂直居中
内联元素居中的问题比较简单。
行内元素水平居中
设置父容器：
text-align: center;
行内元素垂直居中
使文本的列宽等于包的高度可以使单行文本垂直居中。 例如：
.father {
height: 20px;
line-height: 20px;
}
如何使块级元素水平和垂直居中
这一段是本文的核心。 如何使块级子元素在父容器中水平和垂直居中？ 有几种写法。 我们上去看看吧。
margin:auto的问题
在 CSS 中水平居中元素非常简单：如果是内联元素，则将 text-align:center 应用于其父容器； 如果是块级元素，则应用 margin:auto 或然后 margin: 0auto。
这里，margin:auto 等同于 margin:autoautoautoauto。 margin:0auto 与 margin:0auto0auto 等价，四个值分别对应上、右、下、左。 其估计值取决于剩余空间。
但是，如果您想让元素垂直居中，则 margin:auto 将不起作用。
例如下面这段代码：
Document
.father{
height: 500px;
background: pink;
}
.son {
width: 300px;
height: 200px;
background: red;
margin: auto;
}
里面的代码中，父元素和子元素都有固定的宽度和高度。 尽管在这些情况下，我为子元素设置了 margin:auto，但子元素仍然没有垂直居中。
那么有没有更好的通用做法呢？
方法一：绝对定位+margin（需要指定子元素的宽高，不推荐）
Document
* {
margin: 0;
padding: 0;
}
.father{
position: relative;
min-height: 500px;
background: pink;
}
.son {
position: absolute;
width: 200px;
height: 100px;
background: red;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
子元素的内容
代码解释：我们先将子元素左上角居中，然后向下连接一半长度（50px），达到垂直居中的效果； 水平居中的原理类似。
缺点：需要指定子元素的宽度和高度，margin-top和margin-left属性值可以写。
但一般来说，对于这些需要居中的元素，其宽度和高度往往是由其内容决定的，不建议固定宽度和高度。
方法二：绝对定位+平移（无需指定子元素宽高，推荐）
Document
* {
margin: 0;
padding: 0;
}
.father{
position: relative;
min-height: 500px;
background: pink;
}
.son {
position: absolute;
background: red;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
子元素的内容
这些写法可以让子元素在父容器中垂直居中，而无需指定子元素的宽度和高度。 由于在translate()函数中使用了比例值，因此它是根据元素本身的长和高（动态估计的宽和高）进行转换和连接的。
形式三：flex布局（待完善）
将父容器设置为Flex布局，然后给父容器添加属性justify-content:center，这样子元素就可以水平居中； 然后给父容器添加一个属性align-items:center，让子元素可以垂直居中。
代码示例：
Document
* {
margin: 0;
padding: 0;
}
.father{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: pink;
}
.son {
background: red;
}
子元素的内容
上述写法的缺点是，给父容器设置属性 justify-content: center 和align-items: center 后html居中代码，父容器中的所有子元素垂直居中（如果父容器中有多个子元素）容器） ）。 但我显然想要将指定的子元素居中，我该如何改进呢？
形式4：flex布局+margin：auto（推荐）
我们只需要写两行声明：先为父容器设置display:flex，然后为指定的子元素设置熟悉的margin:auto，这样就可以在剩余空间中水平和垂直放置指定的子元素居中。 你完成了。
代码示例：
Document
* {
margin: 0;
padding: 0;
}
.father{
display: flex;
min-height: 100vh;
background: pink;
}
.son {
margin: auto;
background: red;
}
子元素的内容，想水平垂直居中
这个元素不想水平垂直居中
请注意，当我们对父容器使用flex布局时，子元素的margin:auto不仅可以水平方向居中，还可以垂直方向居中。
参考文章：参观flex上下文中神奇的手动边距
垂直居中典型应用场景：红包窗帘/弹窗问题引入
以“弹窗”为例。 如今，你的弹窗各种风格、布局满天飞。 然而，进入公司后，新人在第一次写弹窗之前都会问一个问题：“这么常见的弹窗没有标准吗？” 向上。
建议在写弹窗的时候，无论怎样，一定要严格使用水平居中和垂直居中的写法。
不要用margin-top来估计弹出窗口距离屏幕底部的位置，太垃圾了。 不要让领导想：“你后端代码写了这么久，连一个弹窗都处理不了？”
联通终端，红包帘/弹窗居中标准写法（特殊标准）
在联通场景下，这里是红包帘/弹窗的居中书写方式。 请注意，它是严格居中且非常标准的。 为什么选择中国联通？ 你见过PC网页给你发红包吗？
实际开发中，可以直接使用下面的代码。 注释很详细，也很贴心。
Document
/* 整个弹窗组件 */
.component_popup {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
}
/* 遮罩背景 */
.popup_mask {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
}
/* 弹窗区域（内容 + close）：严格居中 */
.popup_content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 弹窗的内容部分 */
.content_box {
width: 15.45rem;
height: 19.32rem;
background: url(http://img.smyhvae.com/20191010_1500_red-packet.png) no-repeat;
background-size: 15.45rem 19.32rem;
}
/* 弹窗的close图标 */
.content_close {
width: 1.25em;
height: 1.25em;
background: url(http://img.smyhvae.com/20191010_1500_close.png) no-repeat;
background-size: 1.25rem 1.25rem;
margin: 0 auto;
margin-top: 0.5rem;
}
默认文档流中的页面主体
达到疗效：
补充：
1、如果你的页面中有很多弹窗，建议将弹窗封装成一个具体的组件。
2、任何弹窗都需要解决“滚动浏览”的问题。 本文篇幅有限，请自行参考。
最后一段
有些实现方法虽然简单，但必须经得起反复试验。 我们必须尊重每一行代码，而不是肤浅的。 团队发展需要的不是个性，而是标准和规范。
参考链接 我的公众号
