小白前端开发笔记-前端面试必备--元素的水平垂直居中（超级全）

最新推荐文章于 2024-04-21 08:03:41 发布
置顶 最新推荐文章于 2024-04-21 08:03:41 发布
阅读量238 收藏
点赞数
分类专栏： 小白前端开发笔记 文章标签： html css css3 html5 flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/s2422617864/article/details/108324616
版权

元素水平垂直居中

本文对元素的水平垂直居中通过两方面来呈现，每一方面又分为元素宽高已知和未知，以上代码均通过测试，可直接使用，如有缺陷欢迎指正！

相对于父元素（宽高已知）

用右侧目录点击观看体验更佳

1.1 margin硬挤

<style>
        .a1;
            border: 1px solid red;{
            width: 600px;
            height: 600px solid red;
        }

        .a2 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin-left: 250px;
            margin-top: 250px;
        }
</style>
<body>
    <div class="a1">
        <div class="a2"></div>
    </div>
</body>

1.2 text-align+vertical-align

<style>
        .a1 {
            width: 600px;
            height: 600px;
            border: 1px solid red;
            line-height: 600px;
            text-align: center;
        }

        .a2 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            vertical-align: middle;
            display: inline-block;
            /* margin-left: 250px; */
            /* margin-top: 250px; */
        }
    </style>

1.3.1 position+margin

<style>
        .a1 {
            width: 600px;
            height: 600px;
            border: 1px solid red;
            position: relative;
            /* line-height: 600px; */
            /* text-align: center; */
        }

        .a2 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            top: 0px;
            right: 0px;
            left: 0px;
            bottom: 0px;
            margin: auto;
            /* vertical-align: middle; */
            /* display: inline-block; */
            /* margin-left: 250px; */
            /* margin-top: 250px; */
        }
    </style>

1.3.2 positon+calc函数

<style>
        .a1 {
            width: 600px;
            height: 600px;
            border: 1px solid red;
            position: relative;
            /* line-height: 600px; */
            /* text-align: center; */
        }

        .a2 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            top: calc(50% - 100px / 2);
            /* right: 0px; */
            left: calc(50% - 100px / 2);
            /* bottom: 0px; */
            /* margin: auto; */
            /* vertical-align: middle; */
            /* display: inline-block; */
            /* margin-left: 250px; */
            /* margin-top: 250px; */
        }
    </style>

1.3.3 position+margin-top

<style>
        .a1 {
            width: 600px;
            height: 600px;
            border: 1px solid red;
            position: relative;
            /* line-height: 600px; */
            /* text-align: center; */
        }

        .a2 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            margin-top: -50px;
            top: 50%;
            margin-left: -50px;
            left: 50%;
            /* top: calc(50% - 100px / 2); */
            /* right: 0px; */
            /* left: calc(50% - 100px / 2); */
            /* bottom: 0px; */
            /* margin: auto; */
            /* vertical-align: middle; */
            /* display: inline-block; */
            /* margin-left: 250px; */
            /* margin-top: 250px; */
        }
    </style>

1.3.4 position+translate

<style>
        .a1 {
            width: 600px;
            height: 600px;
            border: 1px solid red;
            position: relative;
            /* line-height: 600px; */
            /* text-align: center; */
        }

        .a2 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            transform: translate(-50%, -50%);
            /* margin-top: -50px; */
            top: 50%;
            /* margin-left: -50px; */
            left: 50%;
            /* top: calc(50% - 100px / 2); */
            /* right: 0px; */
            /* left: calc(50% - 100px / 2); */
            /* bottom: 0px; */
            /* margin: auto; */
            /* vertical-align: middle; */
            /* display: inline-block; */
            /* margin-left: 250px; */
            /* margin-top: 250px; */
        }
    </style>

1.4.2 flex-box

   <style>
        .a1 {
            width: 600px;
            height: 600px;
            border: 1px solid red;
            display: flex;
            justify-content: center;
            align-items: center;
            /* position: relative; */
            /* line-height: 600px; */
            /* text-align: center; */
        }

        .a2 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            /* position: absolute; */
            /* transform: translate(-50%, -50%); */
            /* margin-top: -50px; */
            /* top: 50%; */
            /* margin-left: -50px; */
            /* left: 50%; */
            /* top: calc(50% - 100px / 2); */
            /* right: 0px; */
            /* left: calc(50% - 100px / 2); */
            /* bottom: 0px; */
            /* margin: auto; */
            /* vertical-align: middle; */
            /* display: inline-block; */
            /* margin-left: 250px; */
            /* margin-top: 250px; */
        }
    </style>

1.4.3 flex-box+margin

<style>
        .a1 {
            width: 600px;
            height: 600px;
            border: 1px solid red;
            /* position: relative; */
            display: flex;
            /* line-height: 600px; */
            /* text-align: center; */
        }

        .a2 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            /* position: absolute; */
            /* transform: translate(-50%, -50%); */
            /* margin-top: -50px; */
            /* top: 50%; */
            /* margin-left: -50px; */
            /* left: 50%; */
            /* top: calc(50% - 100px / 2); */
            /* right: 0px; */
            /* left: calc(50% - 100px / 2); */
            /* bottom: 0px; */
            margin: auto;
            /* vertical-align: middle; */
            /* display: inline-block; */
            /* margin-left: 250px; */
            /* margin-top: 250px; */
        }
</style>

1.5 table-cell

.a1 {
            width: 600px;
            height: 600px;
            border: 1px solid red;
            display: table-cell;
            vertical-align: middle;
            /* justify-content: center; */
            /* align-items: center; */
            /* position: relative; */
            /* line-height: 600px; */
            text-align: center;
        }

        .a2 {
            width: 100px;
            height: 100px;
            display: inline-block;
            background-color: yellow;
            /* position: absolute; */
            /* transform: translate(-50%, -50%); */
            /* margin-top: -50px; */
            /* top: 50%; */
            /* margin-left: -50px; */
            /* left: 50%; */
            /* top: calc(50% - 100px / 2); */
            /* right: 0px; */
            /* left: calc(50% - 100px / 2); */
            /* bottom: 0px; */
            /* margin: auto; */
            vertical-align: middle;
            /* display: inline-block; */
            /* margin-left: 250px; */
            /* margin-top: 250px; */
        }

相对于父元素（宽高未知）

1.2 text-aligin+vertical-align

1.3.4 position+translate

1.4.2 flex-box

1.4.2 flex-box+margin

1.5 table-cell

相对于浏览器窗口（宽高已知）

1.1 margin硬挤

1.3.1 position+margin

1.3.2 positon+calc函数

1.3.3 position+margin-top

1.3.4 position+translate

1.4.2 flex-box

1.4.3 flex-box+margin

1.5 table-cell

相对于浏览器窗口（宽高未知）

1.3.4 position+translate

1.4.2 flex-box

1.4.3 flex-box+margin

1.5 table-cell

火腿肠烧烤大赛冠军
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
鸿蒙HarmonyOS应用开发-自定义实现验证码框_鸿蒙开发字母验证码
2401_84181125的博客
04-21 1116
只需要稍微的封装下，将输入框的宽度、高度、圆角、颜色、输入类型、数量等包裹在一个对象中，使用@State修饰，并一一对应应用，即可将这个组件做成一个很标准的任意发挥的输入框啦。唯一的遗憾是，目前没法去除TextInput点击的样式，除非你是纯色（纯色变化看不出来…）以下就是该例子代码啦：@Preview@Componentbuild() {Stack() {= null) {Text(item)})
前端面试 - css+html常考知识点总结，在线学习前端开发
radcb55226的博客
04-05 561
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。分享一些简单的前端面试题以及学习路线给大家，狂戳这里即可免费领取何学起的朋友，同时减轻大家的负担。**[外链图片转存中…(img-tMtl6TIE-1712316564410)][外链图片转存中…(img-lPabNjwF-1712316564410)]
Web前端面试指导(十四)：如何居中一个元素（正常、绝对定位、浮动元素）?
热门推荐
雄领IT的专栏
09-26 1万+
题目点评 这道题目的提问比较多，连续问了三个问题，正常元素、绝对定位元素、互动元素如何居中，而且居中没有说清楚是垂直居中还是水平居中，要回答清楚这个问题，必须得有深厚的功底，而且要分类的来回答，条理要清楚。可以先把水平居中各种情况说清楚，然后在把垂直居中说清楚。 元素水平居中的方式      1）行级元素居中    父元素设置 text-align:center
面试官：元素水平垂直居中的方法有哪些？如果元素不定宽高呢？
weixin_44475093的博客
04-07 1553
一、背景在开发中经常遇到这个问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素居中是一个非常基础但又是非常重要的应用场景，实现居中的方法存在很多，可以...
前端面试题：如何让元素水平垂直居中？
这个世界上有各种各样的人.
09-26 872
文章目录前言一、行内元素1.行内元素特征2.行内水平垂直居中二、块元素1.块状元素特征2.块状元素水平垂直居中总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、行内元素 行内元素最常使用的就是<span>，其他的只在特定功能下使用，修饰字体<b>和<i>标签，还有<sub>和&lt
css 实现水平垂直居中的6这个例子
HHH917的博客
03-02 259
<div class="container"> <div class="inner"> </div> </div> 1.margin负值 .container { width: 400px; height: 400px; border: 2px solid #111; position: relative; } .inner { ...
前端面试经典问题：CSS中居中的几种方式
wulixiaoxiao1的博客
02-25 2652
转载自：http://www.jianshu.com/p/a7552ce07c88 为面试常客，学会这些，面试多点把握，同学间逼格升高 周五，老大说他面试了一个问题，是css居中的问题，然后我们在这边就讨论了一番，周末嗨玩，尾巴上想起这件事，特来总结，希望能帮助到求职和学习的朋友！ 参考了这篇文章，快速传送门内容都是我手敲实践过的可靠！ ![](img1.jpg)这
CSS前端经典面试题及解析——小白入门必备
2401_84092809的博客
04-19 703
前端校招精编面试解析大全点击这里免费获取完整版pdf查看自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
CSS前端经典面试题及解析——小白入门必备，前端开发规范文档
qiqiyuer的博客
04-03 962
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。什么？你问面试题资料在哪里，这不是就在你眼前吗（滑稽。**
鸿蒙HarmonyOS项目实战：实现微信app效果（页面实现）_鸿蒙应用开发微信
最新发布
2401_84181253的博客
04-21 1094
由于在上篇文章中，牵扯到的一些布局知识点，没有讲解到，我一个同事看了我的文章之后，建议，对于一些基础的知识，也带一带简单做个说明，所以本次会把上次和本地用到的布局相关知识进行一个简单说明，如果对相关的知识比较熟悉，这部分内容可以酌情阅读。在布局填充到flex中之后，我们可以通过对横向和纵向进行控制，用来实现容器内内容的横竖向排列方式，可以帮我们实现等分、居左、居右等很多种对其方式。的优势就出来了，使用它可以将布局进行层级平铺，通过布局间的依赖关系控制，实现整体的界面布局。是不是很简单，瞬间理解了，有没有。
前端最全面试八股文
前端你鹏哥的博客
02-02 1145
在改变不同的屏幕分辨率可以切换到不同的静态布局上，但是布局中的元素位置会发生改变，但是在每个静态布局中，页面中的元素不会随着窗口大小的调整发生变化。箭头函数与普通函数的区别在于： 1、箭头函数没有this，所以需要通过查找作用域链来确定this的值，这就意味着如果箭头函数被非箭头函数包含，this绑定的就是最近一层非箭头函数的this， 2、箭头函数没有自己的arguments对象，但是可以访问外围函数的arguments对象 3、不能通过new关键字调用，同样也没有new.target值和原型。
web前端面试-------CSS实现水平居中的六种方法
别告诉我有Bug
09-14 2086
效果图： html： &lt;div class="parent"&gt; &lt;div class="child"&gt;&lt;/div&gt; &lt;/div&gt; 1.通过margin: 0 auto; text-align: center实现CSS水平居中。 .parent{ width: 600px; height: 200px; background: ...
web前端面试水平垂直居中详解
开心大表哥
06-26 6623
1.行内元素的水平垂直居中；通过在父元素中设置text-align，让子元素的文本进行居中；然后通过line-height属性让子元素的行高等于父元素的高度。<div id="div1"> <label id='divSpan'>行内元素水平垂直居中</label> </div> #div1{ background: #ccc; height: 200
前端面试官：你能实现多少种水平垂直居中的布局（定宽高和不定宽高）
在线学习web前端开发教程
12-29 188
前端面试官：你能实现多少种水平垂直居中的布局（定宽高和不定宽高） 我们在日常的开发中，经常会遇到这样一个问题，就是如何实现居中水平垂直居中对齐。并且在面试中也会出现这样的问题，但是我们往往回答的不是很全部，而导致没有得到面试加分。接下来我们通过不同的方式来实现，让我们成功破解这道面试。 1、定宽高 一、绝对定位和负magin值 <template> <div id="ap...
Vuex数据清空方法（用于用户登出等操作）
火腿肠的博客
06-02 1万+
Vuex持久化传送门：Vuex数据持久化 由于项目中需要一个用户登出的功能，而数据放在Vuex中在登出没有刷新时数据并不会更新 所以找到了这样一个很不错的方法 将state以各种方式保存 注册时调用函数赋值 清空时再将保存的state赋值替换当前的state over 首先默认state时要用新的方法注册 把数据写在函数的返回值中（其他方法也可以只要能调用） const getDefaultState = () => { return { token: getToken(),
z-index失效解决方法
火腿肠的博客
02-19 9321
z-index失效的原因 1、一般z-index的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方出现。 2、z-index值越大就越是在上层。z-index：9999；z-index元素的position属性要是relative，absolute或是fixed。 3、z-index在一定的情况下会失效。 ①、父元素position为relative时，子元素的z-index失效。 解决：父元素position改为absolute或static ②、该元素没有设置position属性为非s
Vue中如何使用console.log打印
火腿肠的博客
11-09 7392
1.使用window.console.log() 2.更改配置：
axios响应拦截器错误处理及思想
火腿肠的博客
05-17 6620
axios的拦截器分为两部分（以后源码还是要读的） 服务器状态为300以下 服务器状态为300+ // 添加请求拦截器 axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); // 添加响应拦截器 axios.interc
前端面试必备：HTML-CSS-JS全解析与性能优化技巧
前端面试题汇总是一份全面的参考资料，旨在帮助求职者准备面试，涵盖了一系列前端技术的基础和高级知识点。以下部分详细解释了部分题目涉及的关键概念： 1. 浏览器兼容性和内核 - 面试者需熟悉在哪些主流浏览器（如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值