我创建了一个"；A"；元素，该元素在单击时通过将您带到主页来关闭模态。我让它看起来像一个关闭按钮。但是，我似乎无法将“ X ”垂直居中。在里面。我试着把它放在一个“按钮”里。元素，但这导致了其他问题。下面是代码：

<代码>：根{--主色：#FFC40C；--次色：浅黄色；--主红色：#D9001D；--次级-红色：#FF033E；--深色：#444；--浅色：#fafafa；}身体{font-family：“源代码专业版”，等宽；背景色：var（--浅色）；颜色：var（--深色）；顶部边距：50px；左边距：0；右边距：0；margin-bottom：0；text-shadow：1px 1px 5px var（--浅色）；}一个{文本修饰：无；}.关闭按钮{高度：30px；宽度：30px；背景色：var（--浅色）；颜色：var（--main-red）；左边距：0.5em；边框：2px实线var（--main-red）；边界半径：50%；字体粗细：700；文本对齐：居中；}.关闭模式{位置：固定；顶部：2.8em；右：1.7em；}

<代码><；a类=“关闭按钮关闭模式” href=“#！”>；X<；/A>；

如何将其垂直居中？

顺晟科技：

一个超级简单的方法来集中这些东西是:root { --main-color: #ffc40c; --secondary-color: lightyellow; --main-red: #d9001d; --secondary-red: #ff033e; --dark-color: #444; --light-color: #fafafa; } body { font-family: "Source Code Pro", monospace; background-color: var(--light-color); color: var(--dark-color); margin-top: 50px; margin-left: 0; margin-right: 0; margin-bottom: 0; text-shadow: 1px 1px 5px var(--light-color); } a { text-decoration: none; } .close-button { height: 30px; width: 30px; background-color: var(--light-color); color: var(--main-red); margin-left: 0.5em; border: 2px solid var(--main-red); border-radius: 50%; font-weight: 700; text-align: center; } .close-modal { position: fixed; top: 2.8em; right: 1.7em; }<a class="close-button close-modal" href="#!"> X </a>

你需要为你的标签

尝试使用Flexbox对齐项目。

我补充道：

display: grid;

到你的.Close-Button类。

这是结果.

<代码>：根{--主色：#FFC40C；--次色：浅黄色；--主红色：#D9001D；--次级-红色：#FF033E；--深色：#444；--浅色：#fafafa；}身体{font-family：“源代码专业版”，等宽；背景色：var（--浅色）；颜色：var（--深色）；顶部边距：50px；左边距：0；右边距：0；margin-bottom：0；text-shadow：1px 1px 5px var（--浅色）；}一个{文本修饰：无；}.关闭按钮{显示：Flex；/*Flexbox a.K.a灵活布局*/Justify-content：中心；/*用于水平居中*/align-items：居中；/*用于垂直居中*/高度：30px；宽度：30px；背景色：var（--浅色）；颜色：var（--main-red）；左边距：0.5em；边框：2px实线var（--main-red）；边界半径：50%；字体粗细：700；文本对齐：居中；}.关闭模式{位置：固定；顶部：2.8em；右：1.7em；}

<代码><；a类=“关闭按钮关闭模式” href=“#！”>；X<；/A>；