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

最新推荐文章于 2022-08-11 09:57:49 发布
最新推荐文章于 2022-08-11 09:57:49 发布
阅读量975 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42098339/article/details/102830381
版权

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

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

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


   
   
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  <head>
  4.  <meta charset="UTF-8">
  5.  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.  <title>Document</title>
  8.  <style>
  9.  *{
  10.  margin: 0;
  11.  padding: 0;
  12.  }
  13.  html, body {
  14.  height: 100%;
  15.  width: 100%;
  16.  }
  17.  .outer_wrapper {
  18.  margin: 0 10px;
  19.  height: 100%;
  20.  /* flex布局让块垂直居中 */
  21.  display: flex;
  22.  align-items: center;
  23.  }
  24.  .inner_wrapper{
  25.  background: red;
  26.  position: relative;
  27.  width: 100%;
  28.  height: 0;
  29.  padding-bottom: 50%;
  30.  }
  31.  .box{
  32.  position: absolute;
  33.  width: 100%;
  34.  height: 100%;
  35.  display: flex;
  36.  justify-content: center;
  37.  align-items: center;
  38.  font-size: 20px;
  39.  }
  40.  </style>
  41.  </head>
  42.  <body>
  43.  <div class="outer_wrapper">
  44.  <div class="inner_wrapper">
  45.  <div class="box">A</div>
  46.  </div>
  47.  </div>
  48.  </body>
  49. </html>

强调两点:

  1. padding-bottom究竟是相对于谁的？

答案是相对于 父元素的width值。

那么对于这个outwrapper的用意就很好理解了。CSS呈流式布局，div默认宽度填满，即100%大小，给outwrapper设置margin: 0 10px;相当于让左右分别减少了10px。

  1. 父元素相对定位，那绝对定位下的子元素宽高若设为百分比，是相对谁而言的？

相对于父元素的(content + padding)值, 注意不含border

延伸：如果子元素不是绝对定位，那宽高设为百分比是相对于父元素的宽高，标准盒模型下是content, IE盒模型是content+padding+border。

思路二: 利用calc和vw


   
   
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  <head>
  4.  <meta charset="UTF-8">
  5.  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.  <title>Document</title>
  8.  <style>
  9.  * {
  10.  padding: 0;
  11.  margin: 0;
  12.  }
  14.  html,
  15.  body {
  16.  width: 100%;
  17.  height: 100%;
  18.  }
  20.  .wrapper {
  21.  position: relative;
  22.  width: 100%;
  23.  height: 100%;
  24.  }
  26.  .box {
  27.  margin-left: 10px;
  28.  /* vw是视口的宽度， 1vw代表1%的视口宽度 */
  29.  width: calc(100vw - 20px);
  30.  /* 宽度的一半 */
  31.  height: calc(50vw - 10px);
  32.  position: absolute;
  33.  background: red;
  34.  /* 下面两行让块垂直居中 */
  35.  top: 50%;
  36.  transform: translateY(-50%);
  37.  display: flex;
  38.  align-items: center;
  39.  justify-content: center;
  40.  font-size: 20px;
  41.  }
  42.  </style>
  43.  </head>
  44.  <body>
  45.  <div class="wrapper">
  46.  <div class="box">A</div>
  47.  </div>
  48.  </body>
  49. </html>

效果如下:

神三元
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
布局题：div垂直居中，左右10px，高度始终为宽度一半
Bliss_妍的博客
08-21 1221
问题描述: 实现一个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.
angular-datepicker：为Angular应用程序构建的高度可配置的日期选择器
01-31
支持最新（Angular 10）版本。 对于较旧的版本，请签出CHANGELOG.md文件。 屏幕截图 天： 白天： 月： 时间： 安装： 从npm下载： npm install ng2-date-picker --save 导入DpDatePickerModule模块： import {...
布局题：实现一个div垂直居中, 其距离屏幕左右两边各10px, 其高度始终是宽度的50%。同时div中有一个文字A，文字需要水平垂直居中。
少油少盐不要辣
07-26 1158
<!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> *{ .
如何实现让div垂直居中，左右10px，高度始终为宽度一半
啊对对对的博客
05-20 490
方法一:利用height:0; padding-bottom: 50%; <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca...
实现一个div垂直居中, 其距离屏幕左右两边各10px, 其高度始终是宽度的50%。同时div中有一个文字A，文字需要水平垂直居中。
qq_44746317的博客
03-15 591
盒子高度为宽度的一半
纯css实现div高度等于自适应宽度的一半
SKYG909040638的博客
11-17 3025
1、使用vw（vh）单位 vw： viewpoint width，视窗宽度，1vw=视窗宽度的1% vh: viewpoint height，视窗高度，1vh=视窗高度的1% 长度单位 Chrome IE Firefox Safari Opera 浏览器支持 下表中的数字表示支持该长度单位的最低浏览器版本。 长度单位 Chrome IE Firefox Safari Opera vh, vw 20.0 9.0 19.0 6.0 20.0 div { width: 50vw; height
dayone2latex：DayOne2LaTeX将Day One应用中编写的日记转换为LaTeX书籍
02-05
DayOne2LaTeX 总览 DayOne2LaTeX将用应用程序编写的日记转换为LaTeX书。 虽然第一天的功能可以将日记帐分录导出为PDF，但功能非常有限，用户对格式没有任何控制。 为了克服这些限制，该实用程序使用Day One的内置...
Day10:Day10 练习
07-05
第10天 练习 1： 实现了 OldPhone、MobilePhone、SmartPhone、PhoneLauncher 类 - 代码完整 在类 MobilePhone 中添加了 recordNumbers() 方法 练习 2： 用于国际呼叫的 SmartPhone 类中的 Call() 方法覆盖 - 代码...
达内Java大数据 Day03练习题及答案
11-06
在“达内Java大数据 Day03练习题及答案”这个主题中，我们聚焦于Java编程语言与大数据技术的结合，特别是在学习过程中第三天的实践环节。这些练习题旨在帮助学员巩固和深化对Java语言的理解，同时为后续的大数据处理...
day08 10 练习：统计输入的字符串中各种字符的个数
08-31
day08_10_练习_统计输入的字符串中各种字符的个数
纯CSS使div高度变成宽度的一半
weixin_44000275的博客
09-08 6054
前言 一直在找让当前盒子高度为宽度一半的方法，但是网上基本上都是js版本的，对于不想写js的人来说简直就是强迫症了，发士一定要找出用纯css的方法，于是有了这篇文章。 准备方法 css函数： calc() var() 代码 css :root{ --my-width:200px; --my-height:calc(var(--my-width) / 2) } div{ background:yellow; width:var(--my-width); height:var(--my-height) }
剖析一些经典的CSS布局问题，为前端开发+面试保驾护航
油墨香^-^的博客
08-11 278
W3C对BFC的定义如下：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为"visiable"的块级盒子，都会为他们的内容创建新的BFC（Block Fromatting Context， 即块级格式上下文）。...
实现div左右上下居中，高度随宽度自适应
Alexbyy的博客
08-17 1854
题目要求满足： 一个div垂直居中 其距离屏幕左右两边各10px 其高度始终是宽度的50% 代码实现： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <t...
不固定宽和高的div 水平和垂直都居中
热门推荐
一直很安静
07-29 1万+
在写css的时候经常遇到的一个问题，当div没有固定的宽度或者高度的时候，如何才能让div水平或者垂直居中显示。 如果div有固定宽度的话，用padding，margin都很容易实现。方法有很多种。不过经常遇到这种div没有固定的宽度高度的情况，我们就不能用margin,padding设置固定的距离了。这个问题让很多人头疼。而怎么样才能让这个div居中显示呢？其实这种情况解决的办法也是有很多种，
【面试】915- 字节跳动最爱问的 CSS 面试题
pingan8787
04-01 404
注意：每道题前面出现的 (xx) 数字代表这道题出现的频次，此 CSS 基础是基于 30+ 篇前端面经整理出的问题和对应的回答、参考链接等。文章内容为拿到 Offer 的本人整理。（2）写...
html body div居中,div内部div居中实现方式总结.html
weixin_33341108的博客
06-17 343
.parent1 {width: 200px;height: 200px;border: 2px solid #000;position: relative;}.child1 {width: 100px;height: 100px;margin: auto;position: absolute;top: 0;left: 0;bottom: 0;right: 0;background-color: ...
div在html垂直居中,div 垂直居中(css div水平垂直居中六种方法)
weixin_29119475的博客
06-10 3838
div垂直居中div垂直居中代码示例如下：前台效果如下图所示：如图所示，div中的文字垂直居中。其中主要的属性就是line-height。line-height属性设置行间的间隔(行高即垂直方向)。line-height属性会影响行框的规划。在应用到一个块级元素时，它定义了该元素中基线之间的最小间隔而不是最大间隔。line-height与font-size的计算值之差(在CSS中成为“行间距”)分...
htlml：<div class="date-selector"> <select id="year"></select> <select id="month"></select> <select id="day"></select> </div> css：.date-selector { display: flex; flex-wrap: wrap; gap: 10px; } .date-selector select { padding: 5px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; }
最新发布
06-06
` 用于水平和垂直居中选择框。 - `margin-top: 20px;` 用于在选择框上方增加一些间距，让整个样式更加舒适。 - `padding: 10px;` 和 `font-size: 18px;` 使得选择框更加易用，字体更加清晰。 - `border: 2px solid #...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值