左右居中_008布局题：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-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>

强调两点:

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

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

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

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

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

延伸：如果子元素不是绝对定位，那宽高设为百分比是相对于父元素的宽高，标准盒模型下是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>

效果如下:

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

使用flex布局实现div垂直居中
最近逛网站时无意看到一个新的实现div垂直居中的例子,就记录下来. 废话少说,开撸 <style>.vertical-container{height:300px;-webkit-disp ...
php div中的字上下居中,Div垂直居中效果怎么实现
本篇文章主要给大家介绍实现div垂直方向居中的方法. 网页设计中div各种居中布局,是html/css初学者们最为基础且需要掌握的知识技能.div水平居中效果我们在之前的文章中有为大家介绍过,想必新手 ...
html九宫图div满屏居中,九宫格+DIV水平居中+div垂直居中+div内部文本居中+div内div居中...
有很多网页初手,对网页的 DIV+CSS布局不很精通,我现将常用的几个东西制作在一起, 以方便您使用. 学会了这一个,就可以对 html的盒子模型有更深的了解九宫格 DIV水平居中+div垂直居中 ...
纯css使div垂直居中，div垂直，div居中的方法
首先编写一个简单的html代码,设置一个父div类名为boxFather,再设置一个子div类名为box1.html代码如下: <div class="boxFather"& ...
CSS布局之-水平垂直居中
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法. 另外,文中的css都是用less书写的,如果看不懂less,可以把我给 ...
如何将所有浏览器的div垂直居中？
我想用CSS将div垂直居中. 我不需要表或JavaScript,而只需要纯CSS. 我找到了一些解决方案,但是所有这些解决方案都缺少Internet Explorer 6支持. <body&g ...
html盒子嵌套居中,css在盒子中垂直居中和固定居中
顶部固定居中我是固定的 .w960{ width: 960px; margin:0 auto; } .fixed{ position: absolute; top:0; left: 0; right ...
CSS Transform让百分比宽高布局元素水平垂直居中
CSS Transform让百分比宽高布局元素水平垂直居中很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高 ...
bootstrap 页面垂直居中_前端布局之——水平垂直居中
其他平台文章地址 github: 前端布局之--水平垂直居中 · Issue #3 · yaodebian/bloggithub.com csdn: https://blog.csdn.net/Ya ...

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

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

思路二: 利用calc和vw

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

最新文章

热门文章