CSS:屏幕正中间有个元素A，元素A中有文字A，随着屏幕宽度的增加

始终需要满足以下条件：
- A元素垂直居中于屏幕***；
- A元素距离屏幕左右边距各10px；
- A元素里面的文字”A”的font-size:20px；水平垂直居中;
- A元素的高度始终是A元素宽度的50%; (如果搞不定可以实现为A元素的高度固定为200px;)
- 请用 html及css 实现


html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Centered Elementtitle>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
 
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
 
    .element {
      width: calc(100vw - 20px);
      height: calc((100vw - 20px) * 0.5);
      background-color: pink;
      display: flex;
      justify-content: center;
      align-items: center;
    }
 
    .element span {
      font-size: 20px;
    }
  style>
head>
 
<body>
  <div class="container">
    <div class="element">
      <span>Aspan>
    div>
  div>
body>
 
html>

相关阅读:
驱动上下游高效协同，跨境B2B电商平台如何释放LED产业供应链核心价值
Oracle-RAC集群网络，IO性能测试
现在游戏出海有多少优势？
使用AI编写测试用例——详细教程
SSH 与 SSM
【PAT甲级】1010 Radix
相关网址、spring cloud alibaba、spring cloud、spring boot版本对应
FLASH：一种高效的Transformer设计
复现知乎大佬mmpose中的shufflenetv2+deeppose的方法
RLHF的替代算法之DPO原理解析：从Zephyr的DPO到Claude的RAILF

原文地址：https://blog.csdn.net/yf18040578780/article/details/132743454