一：前端面试题；水平垂直居中的方法（最全最详细）

最新推荐文章于 2024-05-14 03:55:35 发布
最新推荐文章于 2024-05-14 03:55:35 发布
阅读量666 收藏 1
点赞数
分类专栏： 前端面试题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51049889/article/details/118555002
版权

如图所示，我们建立了俩个div，并给它们设置了俩个类，allCenter和allCenterChild分别是设置盒子垂直居中的俩个类，刚开始未加任何代码的效果如下图所示。

第一种方法：使用flex布局

在父级div上的居中class上添加如图所示

效果就变成了下面的效果

第二种：flex布局，父级使用display:flex，子级margin:auto

如图所示：

效果图：

最低0.47元/天 解锁文章
m0_51049889
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
垂直居中的7种方法
Preserve
04-07 3387
1、水平垂直居中 垂直居中 div.center{ text-align:center; background:hsl(0,100%,97%); } div.center span{ wi
CSS 垂直居中的七种方法——史上最详细总结
qq_37384271的博客
10-10 2万+
我们在写页面时，通常会用到水平居中或垂直居中，而水平居中很好处理，不外乎就是设定 margin: 0 auto; 或是 text-align: center; “垂直居中”却比较麻烦，下面介绍七种纯 CSS 实现垂直居中的方式。 一、设定行高（line-height） 设定行高是垂直居中最简单的方式，适用于“单行”的“行内元素”（inline、inline-block），例如单行的标题，或是已经设为 inline-block 属性的 div，若将 line-height 设成和高度一样的数值，则内容的行内元
2024年前端面试硬核之垂直居中的四种方法_前端面试垂直居中，字节跳动前端社招面经
最新发布
2401_84433829的博客
05-14 171
好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。
css 居中问题的总结
qq_43889848的博客
05-15 2236
1.css让浮动的盒子水平居中 解决方法： 给浮动的盒子加一个父盒子，设置宽度跟浮动盒子一样大小，并且overflow:hidden; 设置该盒子为margin: 0 auto; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin:
前端面试题：如何让元素水平垂直居中？
这个世界上有各种各样的人.
09-26 855
文章目录前言一、行内元素1.行内元素特征2.行内水平垂直居中二、块元素1.块状元素特征2.块状元素水平垂直居中总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、行内元素 行内元素最常使用的就是<span>，其他的只在特定功能下使用，修饰字体<b>和<i>标签，还有<sub>和&lt
垂直居中的4种方法(笔记整理)
eternity_w的博客
03-14 958
垂直居中的4种方法 一、对于宽高固定的div 方法1：定位 50% margin 负距 代码如下(一下代码都是在style中)： .box{ width: 200px; height: 100px; position: absolute; left: 50%; top: 50%; margin-top: -50px; margin-left: -10...
最全前端面试题-2（css篇-上百篇题集整理1个月）
05-04
【CSS1. CSS3 特性】：CSS3引入了许多新特性，如边框圆角（border-radius）、阴影效果（box-...以上是对CSS面试题中涉及知识点的详细解释，涵盖了从基础到进阶的各种概念和技术，有助于全面理解和掌握CSS相关知识。
frontend-interview:前端面试题汇总
04-07
前端面试题汇总汇总一些前端常见的面试题，大多数没有标准答案， 不同的人可能有不同深度的回答。同时，这些问题也可以用来检验自己的前端技术水平。（很多问题还是挺考验水平的。）建议不要背答案，而是尽可能地...
Front-End-Interview:前端面试题
04-12
垂直居中方法 如何实现一个自适应的正方形 如何用css实现一个三角形 三栏布局 清除浮动的方法 CSS的BFC的概念? CSS盒子模型，有哪两种？ CSS选择器有哪些，哪些属性可以继承 CSS的选择器优先级? CSS有
2021年前端面试题汇总.docx
03-16
2021年前端面试题汇总 本资源汇总了前端开发中常见的面试题，涵盖了HTML、CSS、JavaScript、Vue等领域，旨在帮助开发者更好地准备面试。下面是本资源中的一些重要知识点： 一、HTML与CSS基础知识 1. 页面导入样式...
2018前端面试题与答案汇总HTML.doc
11-15
3. CSS垂直水平居中：可以使用绝对定位实现。将父元素设置为相对定位，子元素设置为绝对定位，然后通过调整top、left、margin-top和margin-left的值使子元素居中。 4. src与href的区别：src属性插入内容到文档中，...
七种方式实现垂直居中
shortlived的博客
02-12 2709
如果 .parent 的 height 不写，你只需要 padding: 10px 0; 就能将 .child 垂直居中； 如果 .parent 的 height 写死了，就很难把 .child 居中，以下是垂直居中的方法。 忠告：能不写 height 就千万别写 height。
前端实现元素水平垂直居中的九种方式
冰的博客
06-30 331
好了，以上就是实现元素水平垂直居中的九种方式，亲自在浏览器中调试过了，都是没有问题的，具体代码文件已经上传。
实现垂直居中的几种方式
RunningSnail
07-11 2万+
方式一：单行文本垂直居中 其实单行文本垂直居中是垂直居中中最为简单的了。通常使用line-height 和 height配合使用即可，也就是将line-height和height设置为同样的数值。 当然也有道友说其实这个地方设置height值其实完全没有必要，容器会根据line-height自动撑开。这个理论实际上是正确的，他的正确的前提在于该元素内只有文本节点。 但是如果父级元素不设置高度
垂直居中的四种方法
sunny_Destiny的博客
06-27 526
今天我们来学习一下如何使一个盒子垂直居中的四种方法。 第一种方法： <!-- 方法一 --> <div class="con1"> 方块1 </div> 对应的样式为： .con1{ position: absolute; /* 设置元素的定位位置，距离上下左...
div 垂直居中的六种方法
热门推荐
liufeifeinanfeng的博客
11-23 24万+
利用CSS进行元素的水平居中，比较简单，行级元素设置其父元素的text-align center，块级元素设置其本身的left 和 right margins为auto即可。本文收集了六种利用css进行元素的垂直居中的方法，每一种适用于不同的情况，在实际的使用过程中选择某一种方法即可。 Line-Height Method 试用：单行文本垂直居中，demo 代码：
面试中常问的几个水平、垂直居中的方法
qq_21428081的博客
03-20 643
1. 对齐相关的几个CSS属性 三个属性：text-align、vertical-align、line-height 参考链接： https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-align https...
前端面试题之居中问题
dasiy_j的博客
05-14 425
1.水平居中：行内元素(inline或者inline-*类型元素)使用text-align: center;&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &l
2021阿里前端面试题全解析：HTML、CSS与JS核心技术
2021年的阿里巴巴前端面试题第二期涵盖了丰富的知识点，主要围绕HTML、CSS和JavaScript三个核心领域展开。以下是对各个部分的详细解读： 一、HTML篇： 1. 页面导入样式时，`link` 和 `@import` 的区别在于：`link` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值