菜谱模板
注意：这是一个 CSS 菜谱页面的模板页。请在创建新的菜谱页面时将其用作原始模板。斜体注释是关于如何使用模板部分的说明。
此食谱解决的问题或你正在演示的模式的描述。
依赖项
此模式需要包含什么，或者它需要解决什么问题？在此处列出。
示例
更改示例代码。最后一个参数是实时示例高度，你可以根据需要更改。请注意，你可以点击代码块中的“播放”以在 MDN Playground 中编辑示例。
html
<div class="container">
<div class="item">I am centered!</div>
</div>
css
.container {
border: 2px solid rgb(75 70 74);
border-radius: 0.5em;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.item {
border: 2px solid rgb(95 97 110);
border-radius: 0.5em;
padding: 20px;
width: 10em;
}
已做出的选择
解释你在创建模式时的决定。你为什么选择某种方法？如果你想在此处添加一个额外的示例——例如一个带有备用方案的版本，请随意添加。本节故意宽松，因为模式从非常简单到更复杂不等。
有用的备用方案或替代方法
如果有构建此食谱的有用替代方法，或者如果你必须支持不支持的浏览器而使用的备用食谱，请将它们包含在此处的单独部分中。
可访问性考虑
如果存在关于可访问性的任何具体注意事项，请包含此项。如果与你的模式不相关，则可以省略。
另见
- 相关属性的链接：
example-property - 指向文章的链接，展示如何在上下文中使用该属性：“使用……文章”
- 非常好的外部链接。不要害怕外部链接，但它们应该非常出色，而不仅仅是提及微不足道的细节。