当前位置: 萬仟网 > IT编程>网页制作>CSS > CSS实现div不设高度完全居中

CSS实现div不设高度完全居中

2021年02月04日  | 萬仟网IT编程  | 我要评论
要求 body下div垂直居中 div内文字垂直居中 div宽度和高度均为body宽度的一半分析 div居中不难,考虑 margin 或者 left/top 配合 transl

要求

  •  body下div垂直居中
  • div内文字垂直居中
  • div宽度和高度均为body宽度的一半

分析

  • div居中不难,考虑 margin 或者 left/top 配合 translate 属性实现
  • 关键点在于div高度等于body一半,由于body没有高度,设置div height: 50%;得到的结果是div的高度为0
  • 即使通过对body进行绝对定位的手段使得body高度为100vh,div高度设置50%也只能是body高度的一半,而不是宽度的一半
  • 此时要借助于 padding ,因为padding设置百分比时,参考便是父容器的宽度

代码

<!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>
        body{
            padding: 0;
            margin: 0;
        }
        #box{
            width: 50%;
            /* div处置居中 */
            position: relative;
            transform: translate(50%, 25%);
            /*  */
            /* 此处解决div高度为body宽度的一半,并且文字垂直居中 */
            padding-top: 25%;
            padding-bottom: 25%;
            line-height: 0;
            text-align: center;
            /* */
            background-color: #111;
            color: #fff;
        }
    </style>
</head>
<body>
    
    <div id="box">
        box123
    </div>
</body>
</html>

效果

到此这篇关于css实现div不设高度完全居中的文章就介绍到这了,更多相关css div不设高度完全居中内容请搜索萬仟网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持萬仟网!

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

  • CSS3实现各种图形的示例代码

    CSS3实现各种图形的示例代码

    这篇文章跟大家分享了利用CSS3实现各种的图形,例如自适应的椭圆、运动的椭圆、半椭圆、平行四边形以及切角矩形等等,想学习更多的图形实现方法,那么下面来一起看看这... [阅读全文]
  • 什么是HTML?

    什么是HTML?

    html是很多人编程的入门领域。作为初学者,不管你是在哪里学的,学校,视频教程,网络教程等等……它们都会告诉你HTML即:超文本标记语言(Hyper... [阅读全文]
  • 初学html总结

    2019-08-17 17:58:49 html:超文本标记语言,用于网页结构的搭建 html语言构成:由标签、属性、属性值构成 标签:"... [阅读全文]
  • 提高网页效率的14条注意事项图文第1/3页

    网站最基本的东西是什么? ——内容?SEO(搜索引擎优化)?UE(用户体验)?都不对!是速度! 内容再丰富的网站,如果慢到无法访问也... [阅读全文]
  • 【CSS】Sticky Footer 布局

    什么是 Sticky Footer 布局? Sticky Footer 布局是一种将 footer 吸附在底部的CSS布局。 footer... [阅读全文]
  • HTML 表单

    <form>元素: <input>元素: 常用属性: type 文本框类型 name 指定了name的字段才会被提交(不能用... [阅读全文]
  • “vue中微信分享出来的链接点开是首页”问题解决

    最近工作上遇到了这样一个bug。 公司网站有pc端和移动端,两个版本。其中如果手机访问pc端,则自动跳转到移动端。(这是常规操作,没啥稀奇... [阅读全文]
  • 关于浏览器多个标签页之间的通信的讲解

    1.localStorage在添加删除修改时会触发一个storage事件,通过在另一个标签页监听storage事件,就可以得到localSt... [阅读全文]
  • Web 技术:CSS最小和最大(宽度/高度)知识点及优缺点

    Web 技术:CSS最小和最大(宽度/高度)知识点及优缺点

    通常,我们希望限制元素相对于其父元素的宽度,同时使其具有动态性。因此,有一个基础宽度或高度的能力,使其扩展的基础... [阅读全文]
  • MiniUI操作input下拉框和datagrid的基础

    最近因为工作需要,经常和miniui打交道,发现虽然网上有提供案例和完整api,但是有些细节的地方没有详细的解析,这里将最近用到的比较实用的... [阅读全文]
验证码:
Copyright © 2017-2021  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com