一个盒子不给宽度和高度，如何水平垂直居中？

已于 2023-08-29 17:11:52 修改
阅读量106 收藏
点赞数
分类专栏： 前端CSS/HTML面试题 文章标签： 前端 html css
于 2023-03-09 04:33:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43850639/article/details/129415159
版权
文章介绍了两种方法使无宽度和高度的盒子在页面中水平垂直居中。第一种利用flex布局，设置`display:flex`，再通过`justify-content:center`和`align-items:center`实现。第二种方法是采用子绝父相定位，结合边偏移和`transform:translate`调整位置。
摘要由CSDN通过智能技术生成

一个盒子不给宽度和高度，如何水平垂直居中？

方式一：
通过给父盒子添加流式布局：

          display: flex;
          justify-content: center;
          align-items: center;

在这里插入图片描述

方式二（这个是给宽高的）：
子绝父相 + 定位 + 边偏移 + transform translate

在这里插入图片描述

临在❀
关注
专栏目录
CSS 实现盒子水平居中、垂直居中和水平垂直居中的方法
weixin_44211097的博客
09-19 386
CSS 实现盒子模型水平居中 水平居中效果图如下： HTML： CSS 全局样式： 方法一：使用margin: 0 auto;（只适用于子盒子有宽的时候） 方法二：text-align + display（子盒子有或没有宽度的时候都适用） 方法三：position 定位（只适用于子盒子有宽度和高度的时候） 方法四：position + transform（子盒子有或没有宽高的时候都适用） 方法五：flex 布局（弹性布局）（子盒子有或没有宽高的时候都适用） .
[css]盒子水平垂直居中的6种方法
belloc_li的博客
02-17 1万+
让盒子水平垂直居中是前端很基础的知识，在前端的面试中也经常会考查到，今天我就整理总结一下盒子水平垂直居中的几种方法。 盒子的设定 父盒子：width: 400px; height: 500px; 子盒子：width: 100px; height: 100px; （当然也可以是其他数值，只是为了统一得到一个结果就提前给个设定） 预期结果 方法 1.定位法 利用子绝父相，给父盒子添加相对定位子盒子添加绝对定位 代码如下： <!DOCTYPE html> <html lang="en
使一个不定宽高的盒子实现垂直水平居中(简单)
JS_Beauty的博客
06-29 3057
如何使一个不定宽高的元素实现垂直水平居中 结构 <div class="father"> <div class="son"></div> </div> 1.使用css方法： 父盒子设置：display:tbale-cell; text-align:center; vertical-align:middle; 子元素设置：dislplay: inline-block; vertical-align:middle; .father {
css居中对齐的几种方式
袁成新（Chauncey Yuan）
10-13 825
第一种 css .parent { width: 300px; height: 300px; background: #fff000; display: table-cell; vertical-align: middle; text-align: cen...
让一个不定宽高的盒子水平垂直居中
nbsl_的博客
04-03 978
让一个不定宽高的盒子水平垂直居中 一、使用定位的方式 .father{ position: relative; width: 500px; height: 300px; background-color: skyblue; } .son{ width: 40px; height: 40px; background-color: orange; position: absolute;
对于一个未知宽高的盒子，如何让它水平垂直居中于父元素？
weixin_42262156的博客
03-19 732
1. table display: table;使父元素的作用像table元素一样，display: table-cell;使子元素的作用像td一样。给此时的子元素用vertical-align和text-align设置水平垂直居中，子元素其中的未知宽高的元素当然就相对子元素水平垂直居中了。 <!DOCTYPE html> <html> <head> ...
实现一个不设置宽高的盒子水平垂直居中的方法
syx_12的博客
08-26 635
记录面试题-----------大佬直接扔了两个嵌套div让实现垂直居中不能加宽高（还不能调试，靓仔落泪）。 下面记录下实现方法的代码。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte
CSS 实现盒子水平居中、垂直居中和水平垂直居中….docx
11-24
CSS 盒子水平居中、垂直居中和水平垂直居中的实现方法 在 CSS 中，实现盒子水平居中、垂直居中和水平垂直居中是非常常见的需求。本文将介绍五种不同的方法来实现这些效果，并对每种方法的优缺点进行分析。 一、...
固定宽度 高度的页面在不同分辨率的屏幕上垂直 水平居中
09-25
为了实现固定宽度和高度的页面在不同分辨率的屏幕上垂直和水平居中显示，特别是需要兼容IE浏览器，通常需要采用特定的CSS技术。以下是实现该功能的知识点： 1. 使用绝对定位配合负边距实现居中： - 设置页面中需要...
CSS水平垂直居中的几种方法总结
09-24
CSS水平垂直居中技术是指在网页布局过程中，对页面中的一个或多个元素进行位置安排，使其在容器中水平和垂直方向上都处于中心位置的技术。水平垂直居中是Web前端开发中非常常见和重要的布局技巧，它能提高页面的视觉...
设置未知宽高元素水平垂直都居中的几种方法
qq_59541478的博客
09-01 1921
设置盒子或者元素水平垂直居中是在面试中有可能遇到的问题，本文介绍了几种设置方法
未知宽高的盒子垂直居中方法总结
jsyxiaoba的博客
12-04 1208
已知宽高的盒子就不说了，说一下未知宽高的盒子水平垂直居中方法及优缺点，目前有4种。 htm代码及公共css代码 <div class="box"> <div class="all-item item">item</div> </div> .box{width:500px;height:500px;background-color: #ddd;}...
不定宽高盒子的垂直水平居中的方法
agzs70106的博客
08-21 1067
1、 .father { display: table-cell; text-align: center; vertical-align: middle; width:500px;height: 500px; } .child { display: inline-block; } 2、 .containe...
未知div宽度高度使div水平垂直居中（弹性盒子方法）
VarIInJSon的博客
10-14 1万+
不使用js的情况下有三种方法： 1、css3弹性盒子flexbox 2、display:table-cell; 3、transform:translate(); 在这介绍一下css3的弹性盒子内容，对该属性了解的可以直接下拉看红色分割线下的水平垂直居中的方法： 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 弹性容器通过设置 di
css已知宽度，高度/不知道宽度，高度 盒子垂直居中
山外小楼
05-14 2026
1.已知宽度，高度，水平居中 &lt;style&gt; .content{ width: 300px; height: 150px; background: red; } .content&gt;input{ width: 30px; height: 30px; display: block; margin:0 auto;...
不确定高度的盒子怎样垂直居中呢？
柠檬不萌只是酸i
07-25 652
之前用的一直都是可以的，但是不知道为什么今天就是垂直了，居中不了。 各种找问题，最后的最后呢，发现都是自己以为是对的，然后就错了。 transform: translate(x,y) // 这个里面必须要两个参数，不能是一个。 transform: translate3d(x,y,z) transform: translateX(x) transform: translateY(y) ...
让子盒子水平和垂直居中的五种方法
热门推荐
Nirvana_boy_的博客
03-27 1万+
让子盒子水平和垂直居中的五种方法
前端文件优化
weixin_62668406的博客
11-15 639
对于一张100*100像素的图片来说，图像上有 10000 个像素点，如果每个像素的值是 RGBA 存储的话，那么也就是说每个像素有 4 个通道，每个通道 1 个字节（8 位 = 1个字 节），所以该图⽚⼤⼩⼤概为 39KB（10000 * 1 * 4 / 1024）。但是在实际项⽬中，⼀张图⽚可能并不需要使⽤那么多颜⾊去显示，我们可以通过减少每个 像素的调⾊板来相应缩⼩图⽚的⼤⼩。
【小白可懂】微信小程序---课表渲染
最新发布
weixin_71942139的博客
11-16 386
微信小程序课表渲染思路实现
实现一个盒子水平垂直居中
05-29
可以使用CSS的flex布局来实现一个盒子的水平垂直居中。具体步骤如下： 1.设置盒子的父元素为flex布局，可以使用以下代码： ``` .parent { display: flex; justify-content: center; /*水平居中*/ align-items: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值