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

最新推荐文章于 2024-03-13 17:05:22 发布

一码哥

最新推荐文章于 2024-03-13 17:05:22 发布

阅读量2.5k

点赞数 3

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/qq_42288851/article/details/107980876

版权

本文介绍了三种CSS布局方法实现div元素垂直居中并保持其高度为宽度的一半。方法包括：使用padding-bottom百分比，利用calc和vw单位，以及运用flex布局。每种方法都详细说明了实现步骤。

摘要由CSDN通过智能技术生成

问题描述: 实现一个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%;
      }