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

最新推荐文章于 2022-03-15 14:12:05 发布

少油少盐不要辣

最新推荐文章于 2022-03-15 14:12:05 发布

阅读量1.1k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_40713392/article/details/107589769

版权

css 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
         *{
             padding: 0;
             margin: 0;
             list-style: none;
         }
         .static {
             margin: 0 10px;
             background-color: green;
             padding-bottom: 50%;
             position: absolute;
             /* 这个100%，包含了外边距，也就是该盒子排布，从外边距开始排布，先是左边距10px。然后是content内容区 */
             width: calc(100% - 20px);
             top: 50%;
             transform: translateY(-50%);
         }
         .box {
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
             color: #fff;
         }
     </style>
 </head>
 <body>
    <!-- 盒模型包含外边距 -->
     <div class="static">
         <div class="box">hello</div>
     </div>
 </body>
 </html>

少油少盐不要辣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
布局题：实现一个div垂直居中, 其距离屏幕左右两边各10px, 其高度始终是宽度的50%。同时div中有一个文字A，文字需要水平垂直居中。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ .
复制链接

扫一扫

专栏目录