左右居中_008布局题：div垂直居中，左右10px，高度始终为宽度一半
生活随笔
收集整理的這篇文章主要介紹了
左右居中_008布局题：div垂直居中，左右10px，高度始终为宽度一半
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
問題描述: 實現一個div垂直居中, 其距離屏幕左右兩邊各10px, 其高度始終是寬度的50%。同時div中有一個文字A，文字需要水平垂直居中。padding-bottom究竟是相對于誰的？ 父元素相對定位，那絕對定位下的子元素寬高若設為百分比，是相對誰而言的？
思路一：利用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>強調兩點:
答案是相對于父元素的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，高度始终为宽度一半的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何把很多照片拼成一张照片_把很多小照片
- 下一篇： c# 收取邮件 解析,C＃电子邮件主题解