布局题：div垂直居中，左右10px，高度始终为宽度一半

最新推荐文章于 2022-08-11 09:57:49 发布

VIP文章 Bliss_妍

最新推荐文章于 2022-08-11 09:57:49 发布

阅读量1.2k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/yyychocolate/article/details/108151946

版权

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

思路一：利用height:0; padding-bottom: 50%;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      html, body {
        height: 100%;
        width: 100%;
      }
      .outer_wrapper {
        margin: 0 10px;
        height: 100%;
        /* flex布局让块垂直居中 */
        display: flex;
        align-items: center;
      }
      .inner_wrapper{
        background: red;
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 50%;
      }
      .box{
        position: absolute;
        w

最低0.47元/天解锁文章

Bliss_妍

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
布局题：div垂直居中，左右10px，高度始终为宽度一半

问题描述: 实现一个div垂直居中, 其距离屏幕左右两边各10px, 其高度始终是宽度的50%。同时div中有一个文字A，文字需要水平垂直居中。思路一：利用height:0; padding-bottom: 50%;<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device.
复制链接

扫一扫