方法一:利用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;

        width: 100%;

        height: 100%;

        display: flex;

        justify-content: center;

        align-items: center;

        font-size: 20px;

      }

    </style>

  </head>

  <body>

    <div class="outer_wrapper">

      <div class="inner_wrapper">

        <div class="box">A</div>

      </div>

    </div>

  </body></html>

1.使用 padding-bottom:50%//父元素width的一半
    (延伸:css的margin,padding百分比是相对于父元素的width来计算的)
2.使用子绝父相下,子元素的百分比宽高为父元素的(content+padding)值
    (延伸：如果子元素不是绝对定位，那宽高设为百分比是相对于父元素的宽高，标准盒模型下是content, IE盒模型是content+padding+border.)

方法二:利用calc和vw

<!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>

      * {

        padding: 0;

        margin: 0;

      }

      html,

      body {

        width: 100%;

        height: 100%;

      }

      .wrapper {

        position: relative;

        width: 100%;

        height: 100%;

      }

      .box {

        margin-left: 10px;

        /* vw是视口的宽度， 1vw代表1%的视口宽度 */

        width: calc(100vw - 20px);

        /* 宽度的一半 */

        height: calc(50vw - 10px);

        position: absolute;

        background: red;

        /* 下面两行让块垂直居中 */

        top: 50%;

        transform: translateY(-50%);

        //内容水平垂直居中

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: 20px;

      }

    </style>

  </head>

  <body>

    <div class="wrapper">

      <div class="box">A</div>

    </div>

  </body></html>

1.使用calc设置h是w的一半(vw)

2.使用absolute和transform设置本div块垂直居中

3.使用flex布局设置内容水平垂直居中

如何实现让div垂直居中，左右10px，高度始终为宽度一半的更多相关文章

  1. css样式实现左边的固定宽度和高度的图片或者div跟随右边高度不固定的文字或者div垂直居中（文字高度超过图片，图片跟随文字居中，反之文字跟随图片居中非table实现）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. div垂直居中的几种方法

    CSS教程:div垂直居中的N种方法[转](原文地址:http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html) 在说到这个问题的时候 ...

  3. div垂直居中 css div盒子上下垂直居中

    div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...

  4. CSS——div垂直居中及div内文字垂直居中

    最近做demo时,经常需要div垂直居中或者让div内文字相对div垂直居中.水平居中比较简单,就不多说了,这里主要记录一下垂直居中的一些方法. 一.div垂直居中的一些方法: 1.当height.w ...

  5. css 文本和div垂直居中方法汇总

    https://blog.csdn.net/u014607184/article/details/51820508 https://blog.csdn.net/liuying1802028915/ar ...

  6. DIV+CSS自适应窗口高度

    <html> <head> <title>DIV+CSS自适应窗口高度</title> <style type="text/css&qu ...

  7. div垂直居中的方法

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  8. ul、li中的DIV垂直居中

    当li高度可动态改变时,li中的DIV始终保持垂直居中. 由于高度不固定,不能用margin或者padding解决. 最头疼的是vertical-align: middle;也莫名其妙的失效了. 最终 ...

  9. CSS实现文本，DIV垂直居中

    https://blog.csdn.net/linayangoo/article/details/88528774 1.水平居中 1.行内元素水平居中 text-align:center; 利用tex ...

随机推荐

  1. AcWing 1273. 天才的记忆

    从前有个人名叫 WNB,他有着天才般的记忆力,他珍藏了许多许多的宝藏. 在他离世之后留给后人一个难题(专门考验记忆力的啊!),如果谁能轻松回答出这个问题,便可以继承他的宝藏. 题目是这样的:给你一大串 ...

  2. 创建Maven项目骨架并使用

    1.archetype是什么? archetype 字面意思是 原型.可以理解为archetype相当于一个脚手架/模板,通过这个脚手架/模板我们可以快速的创建出一个项目. 比如下图中的这些就是mav ...

  3. CTF反序列化逃逸

    刷了一下CTF反序列化的题,去年没有好好了解.又补了一次PHP,害太菜了.每天看看别人的博客真的可以鼓舞人.简单记录一下两道字符串逃逸问题 推荐一个反序列化总结的很好的笔记https://www.cn ...

  4. DEV-C++ 5.11格式化源代码设置

    下载STYLEAStyle_3.1_windows.zip解压缩,复制到C:\Program Files (x86)\Dev-Cpp\AStyle以管理员身份打开dev-c++软件"工具&q ...

  5. Wordcloud（词云）安装使用以及vscode搭建虚拟环境

    (电脑烧掉了主板,地方上的所有门店全部关闭了,幸好现在京东还通物流,总算是进行把电脑拿回来了.对于一些东西无法实际操作真的是很难受,言归正传,说一下Wordcloud) Wordcloud安装(全局安 ...

  6. 2018年一名合格的web前端程序员应该会哪些技术

    有朋友让小编说一说web前端在未来几年的发展趋向,对于这个问题,恕小编无能为力,web前端技术日新月异,更新非常快,谁也不能预料未来会发生些什么 小编也只能说在2018年,react native和j ...

  7. Shiro精通学习——【第一集：入门】

    入门: main方法直接执行:https://blog.csdn.net/a907691592/article/details/80559904 使用配置文件方式:https://blog.csdn. ...

  8. Guass消元总结

    Guass消元 约旦·高斯消元法 求线性方程组 我们用一个\(n*(n+1)\)的矩阵存储线性方程组各项系数和零次项系数. 每一次找到一个未知数系数最大的方程,交换当前行方程和该方程,并将其他行该未知 ...

  9. BZOJ2457 双端队列 题解

    本题直接求解十分困难,因为在不知道整个序列的数字规律时当前所作决策都无法保证最优性. 考虑正难则反,题目转化为将一个非降序列分成尽量少的几段,让每段对应原问题的双端队列. 先将原数组排序,由于原数组下 ...

  10. java 8内置的四大核心函数式接口

    Consumer<T> : 消费性接口 返回值  void accept(T t); public void happy(double money, Consumer<Double& ...