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>

相关阅读:
基于SSM的小区物业管理系统设计与实现
[附源码]SSM计算机毕业设计校园征兵及退役复原管理系统JAVA
对Axios进行封装
深度学习（小土堆）
《TCP IP网络编程》尹圣雨----2.第一章习题
抖音API：item_search_keyword-抖音关键词月搜查询
【教程】uni-app iOS打包解决profile文件与私钥证书不匹配问题
Xilinx DMA的几种方式与架构
pr视频剪辑素材，免费下载
Codeforces Round #835 (Div. 4) C. Advantage

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