经典布局面试题

最新推荐文章于 2023-09-08 18:38:52 发布

vousmevoyez0613

最新推荐文章于 2023-09-08 18:38:52 发布

阅读量181

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/acm_cn1234567890/article/details/107683780

版权

前端专栏收录该内容

48 篇文章 2 订阅

订阅专栏

问题描述: 实现一个div垂直居中, 其距离屏幕左右两边各10px, 其高度始终是宽度的50%。同时div中有一个文字A，文字需要水平垂直居中。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      html,body {
        width: 100%;
        height: 100%;
      }

      .wrapper {
      	/*设置div占满整个body，为了设置宽度为高度的一半做的辅助工作*/
        width: 100%;
        height: 100%;
        
        /* 让子元素div垂直水平居中 */
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .box {
        margin-left: 10px;
        /* vw是视口的宽度， 1vw代表1%的视口宽度 */
        width: calc(100vw - 20px);
        /* 宽度为宽度的一半 */
        height: calc(50vw - 10px);
        
        background: red;
        
        /*让A水平垂直居中*/
       	display: flex;
       	align-items: center;
        justify-content: center;
        
        font-size: 20px;
      }
    </style>
  </head>
  <body>
  	<!--问题描述: 实现一个div垂直居中, 其距离屏幕左右两边各10px, 其高度始终是宽度的50%。同时div中有一个文字A，文字需要水平垂直居中。-->
    <div class="wrapper">
      <div class="box">
      	<span>A</span>
      </div>
    </div>
  </body>
</html>

vousmevoyez0613

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
经典布局面试题

问题描述: 实现一个div垂直居中, 其距离屏幕左右两边各10px, 其高度始终是宽度的50%。同时div中有一个文字A，文字需要水平垂直居中。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { padding: 0;
复制链接

扫一扫

专栏目录