hbuilder如何设置图片居中显示_Hbuilder div的垂直居中

最新推荐文章于 2022-11-21 14:26:25 发布

weixin_39881575

最新推荐文章于 2022-11-21 14:26:25 发布

阅读量1.6w

点赞数

文章标签： hbuilder如何设置图片居中显示

本文链接：https://blog.csdn.net/weixin_39881575/article/details/111556834

版权

本文详细介绍了如何在HBuilder中实现不固定高宽的div垂直居中，包括使用伪元素、table布局、translate()方法以及利用margin和定位等技巧，提供了多种兼容不同浏览器的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

我们都知道，固定高宽的div在网页中垂直居中很简单，相信大家也很容易的写出来，但是不是固定高宽的div如何垂直居中呢？我们在网页布局，特别是手机等web端网页经常是不固定高宽的div，那么这些div如何垂直居中呢？这篇文章，我总结一下。

固定高宽div垂直居中

如上图，固定高宽的很简单，写法如下：

position:absolute;left:50%;top:50%;width:200px;height:100px;margin-left:-100px;margin-top:-50px;

不固定高宽div垂直居中的方法

方法一：

用一个“ghost”伪元素(看不见的伪元素)和 inline-block / vertical-align 可以搞定居中，非常巧妙。但是这个方法要求待居中的元素是 inline-block，不是一个真正通用的方案。

html如下：

class="block"style="height:300px;">class="centered">haorooms案例题目haorooms案例内容，haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容

css如下：

/* This parent can be any width and height */.block{text-align:center;}/* The ghost, nudged