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

 
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Documenttitle>
     <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">hellodiv>
     div>
 body>
 html>

你可能感兴趣的:(css)