HTML页元素自适应+居中总结（不定期补充）

您所在的位置：网站首页 › html5内容居中大字颜色一起 › HTML页元素自适应+居中总结（不定期补充）

HTML页元素自适应+居中总结（不定期补充）

2024-07-08 15:14| 来源: 网络整理| 查看: 265

感谢大佬：https://www.cnblogs.com/SallyShan/p/11480685.html

图片自适应背景图片自适应 /*背景页*/ #page_content{ width: 100%; height: 100%; background: url(img/bg.png) no-repeat; background-size: cover;/*充满*/ overflow: hidden;/*决定元素溢出的处理方式*/ position: absolute;/*绝对定位*/ }

待更新…

元素居中一、尺寸固定

方法1：定位，50%，margin负距在这里插入图片描述

.box{ width: 400px; height: 300px; border: 2px solid black; /* 把元素变成定位元素 */ position: absolute; /* 元素距离上，左都为50% */ left: 50%; top: 50%; /* 让元素的左外边距，上外边距为元素宽高的1/2 注意margin是负距*/ margin-top: -150px; margin-left: -200px; }

图解：在这里插入图片描述方法2：四方为都为0 ，margin：auto

.box{ width: 400px; height: 300px; border: 2px solid black; position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; }

图解：在这里插入图片描述

二、元素尺寸不固定

在这里插入图片描述

.box2 { position: absolute; left: 50%; top: 50%; /* 设置元素的相对于自身的偏移度为负50%(也就是元素自身尺寸的一半)*/ transform: translate(-50%, -50%); }

方法1：使用伪元素利用inline-block与vertical-align配合伪元素达到垂直居中

/* 背景左右居中 */ .dialog_container { text-align: center; position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.35); } /* 伪元素上下居中 */ .dialog_container:after { display: inline-block; width: 0; height: 100%; content: ""; vertical-align: middle; } /* 真正居中的元素 */ .dialog_box { display: inline-block; vertical-align: middle; text-align: left; border: 1px solid black; } 元素水平居中

方法1：块级元素居中 margin 和width配合在这里插入图片描述

补充：内联元素居中给其父级元素加text-align:center 在这里插入图片描述

【本文地址】

HTML页元素自适应+居中总结（不定期补充）

HTML页元素自适应+居中总结（不定期补充）

今日新闻

推荐新闻