元素距左右屏幕为10px 高度为宽度的50% 垂直居中

最新推荐文章于 2022-03-15 14:12:05 发布

deeop

最新推荐文章于 2022-03-15 14:12:05 发布

阅读量370

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/qq_41620202/article/details/106593285

版权

<style>
	*{padding:0;margin:0;box-sizing:border-box;}
	html,body{height:100%;}
	.a{height:100%;margin: 0 10px;display:flex;align-items:center;}
	.b{width:100%;padding-bottom:50%;background-color:red;position:relative;}
	.c{width:100%;height:100%;font-size:30px;display:flex;justify-content:center;align-items:center;position:absolute;}
</style>
<body>
	<div class="a">
		<div class="b">
			<div class="c">A</div>
		</div>
	</div>
	
</body>

其中padding-bottom:50%是相对于父元素的width，由于.b的width和.a的width相同，所以.b的高度就是.b的padding的高度就是.b的宽度的一半。
.b为position:relative，.c为position:absolute，所以.c的宽高的百分比是相对于.b的content+padding的值来说的\

使用calc和vw

<style>
        *{padding:0;margin:0;box-sizing: border-box;}
        html,body{height: 100%;}
        .f{height: 100%;width:100%;}
        .a{background-color: blue;width:calc(100vw - 40px);margin-left: 20px;height:calc(50vw - 20px);
        position: relative;top:50%;transform: translateY(-50%) }
        .c{width:100%;height: 100%;display: flex;justify-content: center;align-items: center;font-size:60px;color:white;}
    </style>
    <body>
    <div class="f">
            <div class="a">
                <div class="c">A</div>
            </div>
    </div>
</body>

在这里插入图片描述

deeop

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素距左右屏幕为10px 高度为宽度的50% 垂直居中

<style> *{padding:0;margin:0;box-sizing:border-box;} html,body{height:100%;} .a{height:100%;margin: 0 10px;display:flex;align-items:center;} .b{width:100%;padding-bottom:50%;background-color:red;position:relative;} .c{width:100%;height:100%;font
复制链接

扫一扫