首页 > 代码库 > css未知宽高的盒子div居中的多种方法
css未知宽高的盒子div居中的多种方法
不知道盒子大小、宽高时，如何让盒子上下左右居中？
应用场景：比如上传图片时，并不知道图片的大小，但要求图片显示在某盒子的正中央。
方法1：让4周的拉力均匀-常用
<!--Author: XiaoWenCreate a file: 2017-01-13 13:46:47Last modified: 2017-01-13 14:05:04Start to work:Finish the work:Other information:--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } #box1{ width: 100px; height: 100px; background: #ccc; position:relative; } #box2{ width: 20px; height: 20px; background: #f00; position:absolute; top:0; /* 四周拉力相同 */ right:0; /* 四周拉力相同 */ bottom:0; /* 四周拉力相同 */ left:0; /* 四周拉力相同 */ margin:auto; /* 再设置 marign 自动 */ } </style></head><body> <div id="box1"> <div id="box2"></div> </div></body></html>
方法2：c3的属性，移动自己大小的一半
<!--Author: XiaoWenCreate a file: 2017-01-13 13:46:47Last modified: 2017-01-13 14:07:09Start to work:Finish the work:Other information:--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } #box1{ width: 100px; height: 100px; background: #ccc; position:relative; } #box2{ width: 20px; height: 20px; background: #f00; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } </style></head><body> <div id="box1"> <div id="box2"></div> </div></body></html>
知道自身高度的情况下，使用负边距，-margin自身高度的一半
<!--Author: XiaoWenCreate a file: 2017-01-13 13:46:47Last modified: 2017-01-13 14:02:45Start to work:Finish the work:Other information:--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } #box1{ width: 100px; height: 100px; background: #ccc; position:relative; } #box2{ width: 20px; height: 20px; background: #f00; position:absolute; left:50%; top:50%; margin-left:-10px; /* 知道自己大小的情况，自身高度的一半 */ margin-top:-10px; /* 知道自己大小的情况，自身高度的一半 */ } </style></head><body> <div id="box1"> <div id="box2"></div> </div></body></html>
css未知宽高的盒子div居中的多种方法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。