CSS 盒子模型垂直居中/图片垂直居中/禁止系统默认滚动条

最新推荐文章于 2023-11-03 10:33:06 发布

Cokeny.

最新推荐文章于 2023-11-03 10:33:06 发布

阅读量263

点赞数

分类专栏：前端文章标签： css

前端专栏收录该内容

15 篇文章 2 订阅

订阅专栏

盒子垂直居中：

.wrap{
            background: deeppink;
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
<div class="wrap"></div>

图片垂直居中：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                height: 100%;
            }
            body{
                text-align: center;
            }
            body:after{
                content: "";
                display: inline-block;
                height: 100%;
                vertical-align: middle;
            }
            img{
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <img src="testimg.jpg" width="200" height="200"/>
    </body>
</html>

禁止系统默认滚动条：

html,body{
				height: 100%;
				overflow: hidden;
	     }

未知盒子宽高垂直居中(关键词)：

transform:translate(-50%,-50%)

Cokeny.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录