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

要求

&nbs p; body下div垂直居中 div内文字垂直居中 div 宽度和高度均为body宽度的一半

分析

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

代码

<!DOCTY PE  ht ML >
<html lang="en">
<head>
    < ;m eta charset="UTF-8">
    <meta n am e="viewport" content="width=device-width, in IT ial -s cale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie= Edge ">
    <title>Document</title>
    <style>
        body{
            padding: 0;
            mar gin : 0;
        }
         # box{
            width: 50%;
            /* div处置居中 */
            position: relative;
            transform: translate(50%, 25%);
            /*  */
            /* 此处解决div高度为body宽度的一半，并且文字垂直居中 */
            padding -t op: 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不设高度完全居中内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

总结

以上是为你收集整理的 CSS实现div不设高度完全居中全部内容，希望文章能够帮你解决 CSS实现div不设高度完全居中所遇到的问题。

如果觉得网站内容还不错，推荐好友。

查看更多关于CSS实现div不设高度完全居中的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did201702

更新时间：2023-04-27 阅读：25次