如何实现不确定宽高的盒子上下左右居中

图片素材：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
img{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
</style>
</head>
<body>
    <img src="loading.jpg" >
</body>
</html>

让未定义宽高的图片上下左右距离都为0.然后给一个margin自适应。可以想象成一个图片，给了四个方向的相同的力，这样就会形成一种相对的均衡力量让其停留在中间位置了。

时间： 2024-11-07 08:02:42

如何实现不确定宽高的盒子上下左右居中的相关文章

css未知宽高的盒子div居中的多种方法

不知道盒子大小.宽高时,如何让盒子上下左右居中? 应用场景:比如上传图片时,并不知道图片的大小,但要求图片显示在某盒子的正中央. 方法1:让4周的拉力均匀-常用  <!DOCTYPE html>

实现没有宽高的盒子水平垂直居中

实现一个不设置宽高的盒子水平垂直居中的效果的方法方法一.CSS+定位让其父元素相对定位,内部元素绝对定位,这里的父元素为body. 原理:让未定义宽高的图片上下左右距离都为0.然后给一个margin自适应.可以想象成一个盒子,给了四个方向的相同的力,这样就会形成一种相对的均衡力量让其停留在中间位置了. <style> img{ position:absolute; top:0; bottom:0; left:0; right:0; margin: auto ; } </style&g

不设置宽高，使元素居中的方法

在某些特定的场合,在没有知道宽度的情况下却要求水平居中,今找到些解决方法,现转过来一起学习学习方案一.利用浮动的包裹性和相对定位百分比数据值特性,传说称之为“相对浮动” .unknow_width_center1 {position:relative; left:50%; float:left;}.unknow_width_center1 li {position:relative; right:50%; z-index:2; float:left}<</span>ul class=&

css 宽高自适应的div 元素如何居中垂直居中

在我们编写css 样式的时候经常会遇见一个问题那就是一个宽高未知的元素要让他垂直居中如何实现这个呢下面是我常用的两种方法上代码下面的是结构代码 <div class="wrap">//此处为父组件我们会设置父级的宽高并让其居中 <div class="center">//子组件我们要实现它的垂直居中不设置他的宽高宽高都由下面的img引入的图片撑开 <img width="100px" src

盒子不同模式下的宽高判断

曾经遇到过这样的问题,设定一个div,当给div设置padding的时候,发现整个div的宽高都发生了变化,这里就产生了一个疑惑,一个盒子的总体宽高到底是怎么去判断的呢? 经过查询得知,盒子宽高的判定模式一共有两种,分别为标准模式和怪异模式. 为了能更好的理解我们先设定一个div并给它设定样式: 1 #content1{ 2 width: 200px; 3 height: 200px; 4 border: 2px solid black; 5 margin: 20px; 6 padding: 2

BOM，文档宽高及窗口事件

(一)BOM:Browser Object Model(浏览器对象模型)页面上所有的变量都是window的属性一.方法:1. open(,)打开一个新窗口(页面)一参为页面地址url,二参为打开方式如果url为空,默认打开一个空白页面如果打开方式为空,默认打开新窗口方式打开返回值:发挥新打开的窗口的window对象 2. close(,)关闭窗口,前边对象是谁关闭谁兼容:(1)火狐ff:默认无法关闭(2)Chorme:默认直接关闭(3)ie:询问用户可以关闭在本窗口中通过js方法打开的新窗口

那些宽高

所有元素产生偏移一的参照物是文档(浏览器的左上角) 会产生偏移量的属性:标准流(就是盒子上下排列),float,margin,position的absolute或rellative 定位是在margin外面开始定位的 offsetLeft/offsetTop 左偏移和上偏移 offsetHeight/offsetWidth 内容的宽/高+padding+border clientWidth/clientHeight 可见内容的宽/高+padding scrollTo

html学习之CSS控制宽高背景

该笔记为自学html设计笔记,所有知识点为自己整理,如有疑问请浏览十八哥php教程,教程链接,点击这里. 知识梳理:1.html中的<head>和<body>分别为文本网页的头部和主体部分,其中head主要是定义html的类型和属性,比如title是标题部分,meta是机器搜索时的索引:body是html呈现的主体部分,是浏览网页可以看到得那一部分. 2.CSS 的引入方式 ①外部链接一个CSS文件,我们在HTML头部分标明:<link href="css/my.c

对于盒模型的宽高获取填坑

最近,在做一个项目的时候,要获取一个盒模型的宽度,那么当时想到的方法就是el.style.width.我们先看一段代码. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>juke</title> 5 <style type="text/css"> 6 #box { 7 width: 300px; 8 height: 300px; 9 border: 1px solid #0