html实现文字横向对齐以及margin的解释
代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>半透明背景示例</title><style>.overlay-box {width: 300px;height: 150px;background: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 *//*color: white; !* 文字为白色，便于看清 *!*/display: flex;/*align-items: center;*/justify-content: center;border-radius: 10px; /* 圆角效果，可选 *//*margin: 50px auto;*/}</style>
</head>
<body><div class="overlay-box">这是一个半透明背景的盒子<div>ji</div><div>级1</div>
</div></body>
</html>
实现效果：
background: rgba(0, 0, 0, 0.5);
表示
📌 rgba(0, 0, 0, 0.5) 的含义
rgba 是 red, green, blue, alpha 四个参数组成的颜色表示方式，分别是：
| 参数 | 含义 | 示例值 |
|---|---|---|
r | 红色分量（0~255） | 0 |
g | 绿色分量（0~255） | 0 |
b | 蓝色分量（0~255） | 0 |
a | 透明度（0~1之间） | 0.5 |
a越小越透明。
color: white;
其中的color为文字颜色。
border-radius: 10px; /* 圆角效果，可选 */
justify-content: center;必须配合display:flex才能实现效果。
<div style="display: flex; gap: 10px;">这段样式中的gap能自动增加间隔，gap的实现只在实现div的子div或a或者其他里面，无法嵌套使用，比如：
<div style="display: flex; gap: 100px;"><div>ji<div style="display: flex"><div>ji</div><div>ji</div></div></div><div>级1</div></div>就不能用。
没加
style="margin: 50px auto;"
加了
style="margin: 50px auto;"的情况
magin实现的情况是我不动外面动的情况，padding实现的情况是我动外面不动的情况。