求助：用CSS制作圣卢西亚国旗，解决三角形居中问题

嘿，我看了你的代码，问题很明确——你还没给红色三角形添加居中定位的样式。这里有两种简单可靠的方法帮你搞定：

方法1：Flex布局（推荐，代码简洁） #

把蓝色背景容器改成Flex容器，用Flex的内置属性就能轻松实现居中。我还调整了三角形的尺寸，让它更贴合国旗的比例：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>圣卢西亚国旗复刻</title>
<style>
@charset "UTF-8"; 
.blue {
  width: 400px;
  height: 250px;
  background-color: #9EC4E0;
  /* 开启Flex布局，水平垂直居中子元素 */
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 让三角形顶点对齐容器顶部，贴合国旗样式 */
  position: relative; /* 改用relative，避免脱离文档流打乱布局 */
}
.triangle-up {
  width: 0;
  height: 0;
  /* 调整border尺寸，让三角形底边和容器宽度一致 */
  border-left: 200px solid transparent;
  border-right: 200px solid transparent;
  border-bottom: 250px solid red;
}
</style>
</head>
<body>
<div class="blue">
  <div class="triangle-up"></div>
</div>
</body>
</html>

方法2：绝对定位+Transform #

如果你更习惯用定位的方式，也可以给三角形设置绝对定位，配合Transform实现精准居中：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>圣卢西亚国旗复刻</title>
<style>
@charset "UTF-8"; 
.blue {
  width: 400px;
  height: 250px;
  background-color: #9EC4E0;
  position: relative; /* 作为三角形绝对定位的参考父容器 */
}
.triangle-up {
  width: 0;
  height: 0;
  border-left: 200px solid transparent;
  border-right: 200px solid transparent;
  border-bottom: 250px solid red;
  position: absolute;
  top: 0;
  left: 50%;
  /* 向左平移自身宽度的50%，实现水平居中 */
  transform: translateX(-50%);
}
</style>
</head>
<body>
<div class="blue">
  <div class="triangle-up"></div>
</div>
</body>
</html>

小提示 #

如果你的需求是让三角形垂直居中（而不是顶点在顶部），只需要：

• 对于Flex方法：把align-items:flex-start改成align-items:center
• 对于定位方法：把top:0改成top:50%，然后把transform: translateX(-50%)改成transform: translate(-50%, -50%)

内容的提问来源于stack exchange，提问作者Lynn