使用重构的方式制作一个 垂直都居中短边为50px长边为150px的红色十字架
时间: 2024-02-28 11:52:38 浏览: 28
可以使用flex布局和伪元素来实现这个需求,具体代码如下:
HTML代码:
```
<div class="cross"></div>
```
CSS代码:
```
.cross {
display: flex;
justify-content: center;
align-items: center;
width: 150px;
height: 50px;
position: relative;
}
.cross::before,
.cross::after {
content: "";
position: absolute;
background-color: red;
}
.cross::before {
width: 50px;
height: 100%;
left: 50%;
transform: translateX(-25%);
}
.cross::after {
width: 100%;
height: 50px;
top: 50%;
left: 0;
transform: translateY(-25%);
}
```
解释一下代码:
首先,将容器 div 的宽度设置为 150px,高度设置为 50px,并使用 flex 布局实现垂直和水平居中。
然后,使用伪元素 ::before 和 ::after 来分别创建红色的竖线和横线。
竖线的宽度设置为 50px,高度设置为 100%,然后将其水平居中,并通过 transform 属性将其左移一半的宽度。
横线的宽度设置为 100%,高度设置为 50px,然后将其垂直居中,并通过 transform 属性将其上移一半的高度。
这样就完成了一个垂直居中、短边为 50px、长边为 150px 的红色十字架的制作。