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>

相关阅读:
网页大作业代码自取
微服务保护(熔断)和阿里Sentinel
基于Docker搭建单机版Kafka、RabbitMQ、Redis、RocketMQ、MySQL
Vue3 —— 常用 Composition API（二）（hook 函数、toRef 和 toRefs）
【Linux】软硬链接与动静态库(理解软硬链接的特点及使用场景、如何建立动静态库与使用第三方库)
多线程初阶（二）
学信息系统项目管理师第4版系列35_补遗
AI大模型日报#0424：全球首个AI基因编辑器、出门问问上市、微软开源Phi-3 Mini、昆仑万维年收49亿
Linux（三）- Vi 和 Vim 编辑器
将数据库拿到的数据渲染到elementUI 中的table中去

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