前端面试题-CSS让盒子居中的几种方式

最新推荐文章于 2025-04-08 11:08:01 发布
原创 最新推荐文章于 2025-04-08 11:08:01 发布
· 2.3k 阅读 · 10 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#面试 #html #css #定位 #flex

本文介绍了前端面试中常见的CSS让盒子居中的四种方法，包括最常用的水平居中方式，利用定位实现的水平垂直居中，通过flex布局实现的居中效果，以及使用css3的table-cell和vertical-align属性进行居中对齐。

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

前端面试题-CSS让盒子居中的几种方式

第一种

最常用的盒子水平居中方式

<style>
	.box{
    
        border: 1px red solid;
        width: 100px;
        height: 100px;
        margin: 0 auto;
    }
</style>
<body>
	<div class="box"></div>
</body>

第二种

利用定位让盒子水平垂直居中

<style>
最低0.47元/天 解锁文章
aHaoyu
关注
CSS居中布局方法（文字、盒子、图片）
qq_44690237的博客
08-12 2882
前段时间听学长讲他面试的经历，他提到了我最关心的——面试题。其中有一道是写出居中的十种方法，不禁反问自己“能否写出？”......希望以下文章可以帮到需要的小可爱们。
前端面试题--水平垂直居中的方法
weixin_59907064的博客
08-30 411
关于前端面试到的问题：如何实现水平垂直居中的几种常用方法
盒居中
大左的博客
04-20 422
盒居中这种需求在项目众是非常常见的，之前一直用的都是老方法三种定位，之后随着cs3的兴起display：flax是非常方便的一种方法也是用的最多的一种，特别是在移动应用开发的时候来实现，特别强大 之后有一段时间看优快云的时候发现display：table-cell也特别实用但是不常见 我感觉还不错就记下了 下面我就整理一下盒居中的几种方法 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210406120019110.png?x-oss-pro...
盒子居中的几种方式
最新发布
weixin_54018434的博客
04-08 207
将父元素的 display 属性设置为 table ，子元素的 display 属性设置为 table - cell ，然后使用 vertical - align: middle 实现垂直居中，配合 text - align: center 实现水平居中。父元素相对定位，子元素绝对定位，通过 left: 50%;将父盒子设置为相对定位，子盒子设置为绝对定位，然后将子盒子的 top 、 left 、 right 、 bottom 都设为0，并设置 margin: auto。
前端css盒子绝对居中
weilai_a的博客
12-03 239
固定宽高 1，margin负间距+绝对定位定位 2，transform:translate()+绝对定位 3，绝对定位 4，flex布局 5，fixed固定定位 宽高不确定的盒子绝对居中 首先我给大家罗列出来的几种可能性，用到的都是同一种方法。外面的盒子是有宽高的里面的盒子不需要设置宽高。top和bottom取值百分比要相同，left和right的取值百分比要相同。小盒子的大小和形状和百分比有关，也和大盒子的宽高有关。 ...
前端开发中让内容在盒子里面居中的方法
weixin_66708577的博客
02-11 1257
在前端开发中，有多种方法可以实现内容在盒子里面的居中，每种方法都有其适用场景和优缺点。方法适用场景优点缺点固定宽高的块级元素简单易用，兼容性好宽高必须固定单行文本简单，适用于单行文本仅适用于单行文本和多行文本或复杂内容支持多行文本，兼容性好需要嵌套结构，代码繁琐Flexbox现代布局代码简洁，布局灵活不支持旧版浏览器Grid二维布局代码简洁，布局灵活兼容性较差transform多种情况兼容性好需要使用position属性calc()固定宽高的元素兼容性好。
[web前端学习笔记]定位的盒子居中显示
徐小鹏的博客
08-16 6090
哎,好久没接触前端,现在都要重新开始学习了,今天我们来讲如何对定位的盒子居中显示. 大家都知道对盒子居中显示有一个万金油的方法就是 margin: 0 auto;但对于那只适用于没有脱离文档流的元素,用过定位的元素是不适用的今天我就来讲一下对定位盒子也试用的方法<!DOCTYPE html> <html> <head> <meta charset="UTF-8">
2021前端面试题-持续更新.pdf
12-14
前端面试题-持续更新.pdf 本文档涵盖了前端开发中的一些重要知识点，包括BOM、DOM、HTML、CSS、JavaScript、HTTP、HTTPS、Git等方面的知识。 BOM * 事件：BOM提供了很多事件，例如onload、onunload、onerror等。 ...
前端面试题----HTML与CSS(随机排序)
m0_64337756的博客
04-27 491
1 Doctype 作用？ 严格模式与混杂模式如何区分？它们有何意义？ （1）、 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。 （2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。 （3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。 （4）、DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。 2 五大浏览器以及内核？ Chrome 内核 Blink Safari 内核
前端面试题总结-CSS篇
又又的博客
04-01 590
css面试常用题，css基础知识
前端面试之盒子（文字）水平垂直居中的方法
qq_60919669的博客
09-07 5355
方法综合一览就get 类型 分类 重点代码的区别 定位 子绝父相（经典方法） 父盒子：position: relative; 子盒子：position：absolute; top:50%; left:50%; margin-top:-50px;(盒子的一半） margin-left:-50px; margin:auto 父盒子：position: relative; 子盒子...
【前端】盒子水平垂直居中的五大方案
井察的博客
05-18 1462
第一种方式：定位的方式 让当前的盒子相对于其父级的容器来定位 首先要把父级元素的定位方式改为 relative 然后把当前盒子position设置为absolute，先把左上角固定在中间，然后向上和向下移动该盒子的一半 position: absolute; top: 50%; left: 50%; margin-top: -25px; margin-left: -50px; 方法的缺点：一定要知道当前盒子的宽和高，以此来计算调整位置后需要移动的距离 第二种方式：拉住他 **这种方式没什么好说的，
怎么让一个盒子水平居中
weixin_45569631的博客
12-03 705
让盒子水平居中的方法,总共6种,这次先发两种
前端-盒子水平居中-文本属性操作-reset操作-高级选择器-精灵图操作
zdc45625的博客
01-17 412
文章目录盒子水平居中文本属性操作字体案例reset操作高级选择器高级选择器优先级边界圆角a标签的四大伪类背景图片操作精灵图操作案例 盒子水平居中 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;titl
面试题：CSS盒子水平居中、垂直居中、水平垂直居中
公众号：前端充电宝
07-15 784
目录1. 实现盒子水平垂直居中方法一：定位（1）方法二：定位（2）方法三：定位（3）方法四：display:flex方法五：使用JavaScript2. CSS3中的盒模型3. 移动端响应式布局 1. 实现盒子水平垂直居中 <div class="parent"> <div class="child"></div> </div> 方法一：定位（1） 注意：该方法需要考虑浏览器兼容问题 .parent { position: relative
总结盒子居中的常用方法
qq_44473483的博客
07-23 4900
让元素居中是每个前端都会经历的一个问题，而解决该问题的方法也各不相同，各有长短，今天总结下所知晓的方法，并分析利弊。 基础代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>订阅发布</title> <style> .bigBox { width: 500px; height: 500px; backg
前端开发中最实用的【六种css居中对齐】方法，纯干货无废话
weixin_42147268的博客
04-02 3110
前端开发中最实用的【六种css居中对齐】方法，纯干货无废话
前端盒子居中显示方法，前端上下左右居中
cagwh9424的博客
09-09 2461
前端布局的时候总是会遇到一些需要居中的方案，下面是我平常使用的一些方法，当然还有很多的方法也能居中显示。1、宽高固定 – 使用绝对定位居中显示这儿一般是用在固定的大小的box中使用，如果相对定位的box大于屏幕不建议使用。代码如下： <div class="box1"><div></div></div><style type="text/css...
面试题准备（二十三）：使盒子水平垂直居中的五种方法
番茄味姜糖的博客
03-02 1675
介绍了 div 盒子居中的五种方法，其中需要设置子元素宽高的有 第二种 定位 + 负边距 第四种 定位 + 外边距自适应
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值