HTML中，不固定宽高的元素在DIV中水平并且垂直居中

最新推荐文章于 2021-06-30 13:00:48 发布
最新推荐文章于 2021-06-30 13:00:48 发布
阅读量676 收藏
点赞数
分类专栏： js、前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hgg923/article/details/78730819
版权


效果如下：




代码如下：

<html>
<style>
.proImgDiv {width: 300px;height: 285px;display: table;border: 1px solid red;}
.proImgDiv div {width: 300px;height: 285px;display: table-cell;text-align: center;vertical-align: middle;}
.proImg{border: 1px solid red;}
</style>

<body>

<div class="proImgDiv">
	<div>
		<img class="proImg" src="http://7xj243.com1.z0.glb.clouddn.com/admin/RlBbk03gCjpajKI7?imageView2/2/w/300">
	</div>
</div>

</body>
</html>


感谢原文思路

多来哈米
关注
专栏目录
html div宽 高固定,固定宽高的DIV如何绝对居中固
weixin_42309866的博客
06-25 1264
宽度高度不固定的div 如何水平居中以及垂直居中让一个固定长宽的DIV在不同分辨率下都水平居中margin:0 auto居中了但是没有长宽。 设置了长宽居中又无效了。。夜影驱动编程小编今天和大家分享大神div{ width:800px; height:2000px; margin:0 auto; background-color:#FFC;}div有了宽度和高度，居中就是用margin:0 aut...
html语言div图片垂直居中,HTML CSS中如何实现DIV中的图片水平垂直居中对齐
weixin_33367083的博客
05-31 739
HTML CSS中实现DIV中的图片水平垂直居中对方法：所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器)，并且图片位居此容器正中间(中间是指元素容器的正中间)，而图片不是以背景图片(background-image)形式展示，是以元素形式展示的。如下图所示：1、解决水平居中的办法：如果图片左浮动并且"display:inline"时，只要给图片设置一个"t...
不固定宽度的元素居中的办法
斗战圣Q
03-27 1760
不定宽度的水平居中,通常我们的居中方式 .box{width:200px;margin:0 auto;} 但是在没有固宽的情况下.居中就麻烦了 不过可以这样写,用relative; 无标题文档 我要居中 zz: http://striblog.com/2010/02/width-center/
一个盒子在父级中水平垂直居中
qq_28223305的博客
02-18 428
#box{ //父级 text-align: center; display: table; } #div1{ //子集 vertical-align: middle; display: table-cell; }
一个未知宽高的元素在div中垂直水平居中
weixin_33725807的博客
05-26 145
<body> <div id="#div1"> <img src="img1.png"></img> </div> </body> 那么，如何让img元素在div中居中对齐呢？ 第一种方法 第一步：在img标签后面添加一个元素，比如说添...
小div在大div中水平垂直居中（两个div都固定宽高）
从入门到放弃的博客
07-23 146
转载自：https://blog.csdn.net/sleepwalker_1992/article/details/80656170
元素居中（固定宽高与不固定宽高）
xieyizi95的博客
10-20 225
元素居中元素的水平和垂直居中：（1）元素的宽高固定（元素百分比偏移和margin加偏移量）（2）元素的宽高固定（margin的auto）（3）使用transform属性（4）使用table（5）使用flex 元素的水平和垂直居中： 来自一个野蛮生长的前端小白的成长记录开始咯，先从元素居中开始： （1）元素的宽高固定（元素百分比偏移和margin加偏移量） .parent{ position: relative; } .child{ position: absolute; width: 固定; he
固定宽高的DIV如何绝对居中
12-13
在网页设计中，将一个固定宽高的`div`元素居中是常见的布局需求。这个问题的解决方案通常涉及到CSS的定位属性，如`position`、`top`、`left`以及`margin`。以下是对该问题的详细说明： 首先，我们要确保元素的宽高...
javascript实现在指定元素中垂直水平居中
11-25
本节将探讨如何使用JavaScript结合CSS实现未知宽高元素在指定容器中的垂直水平居中效果。 首先，我们来看一个具体的例子，这个例子中我们将一个`<span>`元素（id为"antzone"）居中于一个`<div>`元素（id为"box"）内...
块级元素的三种垂直水平居中的方法
12-29
直奔主题在这里提供三种块级元素垂直水平居中的方法 flex（子级宽高可固定也可不固定，随意） 定位+margin（固定子级的宽高，margin-top,margin-left取自身一半的负值） 定位+transform（不固定子级的宽高） flex...
html 不定宽元素居中,四种常用方法 设置 不定/定宽高元素 在窗口/父元素中 水平垂直居中方法...
weixin_36179777的博客
06-30 293
一、定宽高元素在屏幕窗口水平垂直都居中，方法如下：元素{position: fixed;left: 50%;top: 50%;/*负值+宽的一半+单位*/margin-left: -width/2+px;/*负值+高的一半+单位*/margin-top: -height/2+px;}二、不定宽高元素在屏幕窗口水平垂直都居中，方法如下：元素{position: fixed;left: 0;top:...
不固定宽和高的div 水平和垂直都居中
一直很安静
07-29 1万+
在写css的时候经常遇到的一个问题，当div没有固定的宽度或者高度的时候，如何才能让div水平或者垂直居中显示。 如果div有固定宽度的话，用padding，margin都很容易实现。方法有很多种。不过经常遇到这种div没有固定的宽度高度的情况，我们就不能用margin,padding设置固定的距离了。这个问题让很多人头疼。而怎么样才能让这个div居中显示呢？其实这种情况解决的办法也是有很多种，
不固定高度元素的垂直居中
大白的博客
01-22 1316
元素垂直居中的方法有很多，之前偶然发现了一个不需要固定高度即可让元素垂直居中的方法。 其实原理就是使用表格模式， 1.对元素父级使用 display: table; 2.对元素使用： display: table-cell; vertical-align: middle; demo如下： css部分： .wrap { display: table;
没有固定高度的div，在父元素中垂直居中
Hero_rong的博客
11-27 1210
如图，我要做的效果是将中间蓝色的地方，也就是这个.stopover-station标签，上下垂直居中，只要在需要居中的父元素上设置 .operate-mask-outer&gt;#operateMask { align-items: center; display: -webkit-flex; } 利用弹性盒子来居中： align-items: stretch|center|f...
父元素为一个div，宽度高度不固定，子元素是一个块状元素，宽高已知，如何实现子元素在父元素内水平、垂直居中？
Stone的博客
10-10 2716
父元素为一个div，子元素是一个块状元素，宽高已知，如何实现子元素在父元素内水平、垂直居中？ 1、 //利用相对定位，让子元素垂直居中 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;style type="text/css"&am
宽高都200px的div在浏览器窗口居中（水平垂直都居中）
Rui012345的博客
04-10 1561
1.fixed,从中间移动定位 position:fixed;width:200px;height:200px;left:50%;top:50%; margin-left:-100px;margin-top:-100px 第一行设置完：盒子的左上角的点，刚好处于浏览器页面中间，需要向左向上移动才可实现整体的居中，所以margin-left=负的盒子宽的一半，margin-top=负...
怎么让一个不定宽高的div水平居中，垂直水平居中？
baidu_38609334的博客
07-13 9356
一开始，我看到这个问题的时候，心里想这么简单，不就是margin:0 auto吗，再仔细看题目的时候，我去，不定宽高，什么鬼，于是，只能自己动手，亲手实验了。1、利用弹性布局，这是我认为最简单的且容易理解的方法html:&lt;body&gt; &lt;div class="one"&gt; &lt;div class="two"&gt;wo&lt;/div&gt; ...
弹出框--用css实现div在页面居中（水平垂直居中效果）
热门推荐
qq_26780317的博客
10-10 2万+
前言：在写页面的时候，经常会用到弹出框效果，一般使用插件进行处理，但是有时会出现冲突问题，下文将记录用CSS实现弹出框效果，超级简单，在此记录一下。 一、div宽高固定，使用css实现居中效果 ①当div的宽高固定时，父元素shadow通过absolute定位以后，通过top：50%，left：50%移动到屏幕中央，子元素shadow-bg也absolute定位，通过top,lef...
父元素和子元素宽高不固定如何实现水平垂直居中
最新发布
04-11
可以使用 flex 布局，将父元素设置为 display: flex，再使用 justify-content 和 align-items 属性来实现水平垂直居中。具体代码如下： ```html <div class="parent"> <div class="child"></div> </div> ``` ```css .parent { display: flex; justify-content: center; align-items: center; } .child { /* 假设子元素需要在父元素中居中 */ } ``` 另外，如果需要兼容老版本浏览器，也可以使用绝对定位和 transform 属性来实现，具体代码如下： ```html <div class="parent"> <div class="child"></div> </div> ``` ```css .parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 假设子元素宽高不固定需要居中 */ } ``` 为什么鸟儿飞行过程中头部不会晕眩？ 笑话：据说程序员最怕的事情就是……说出来你们可能不信，我也不信。 关于前面的要求，我不知道您在说什么。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

多来哈米

还可以打赏？？？来试一毛

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值