css两种常用的不定宽高的水平垂直居中方法,记住它,不再为样式发愁

js基础

1)对js的理解?
2)请说出以下代码输出的值?
3)把以下代码,改写成依次输出0-9
4)如何区分数组对象,普通对象,函数对象
5)面向对象、面向过程
6)面向对象的三大基本特性
7)XML和JSON的区别?
8)Web Worker 和webSocket?
9)Javascript垃圾回收方法?
10)new操作符具体干了什么呢?
11)js延迟加载的方式有哪些?
12)WEB应用从服务器主动推送Data到客户端有那些方式?

js基础.PNG

前16.PNG

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

}

效果图

在这里插入图片描述

接下来我们就在这个基础上,对红色方框的元素标签进行水平垂直居中的操作

第一种方法


第一种方法我强烈推荐,用到了我们熟悉的flex布局。

  • 元素标签内容
我是box中的内容
  • 样式内容

.box{

width: 600px;

height: 300px;

background: lightgreen;

/以下三个样式就能实现水平垂直居中/

display: flex; /先开启flex布局/

justify-content: center; /实现水平居中/

align-items: center; /实现垂直居中/

}

.content{

background: red;

}

  • 效果图

在这里插入图片描述

是不是非常的方便呢?只需要三个在外部元素标签设置三个样式就能实现内部元素的水平垂直居中。

第二种方法


第二种方法运用的就是定位和transform的知识来实现水平垂直居中

  • 元素标签内容

我是box中的内容

  • 样式内容

.box{

width: 600px;

height: 300px;

background: lightgreen;

position: relative; /外部元素开启relative定位/

}

.content{

background: red;

position: absolute; /内部元素开启absolute定位/

最后

小编综合了阿里的面试题做了一份前端面试题PDF文档,里面有面试题的详细解析

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

虽只说了一个公司的面试,但我们可以知道大厂关注的东西并举一反三,通过一个知识点延伸到另一个知识点,这是我们要掌握的学习方法,小伙伴们在这篇有学到的请评论点赞转发告诉小编哦,谢谢大家的支持!

_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0tlcGxlcl9JSQ==,size_16,color_FFFFFF,t_70)

虽只说了一个公司的面试,但我们可以知道大厂关注的东西并举一反三,通过一个知识点延伸到另一个知识点,这是我们要掌握的学习方法,小伙伴们在这篇有学到的请评论点赞转发告诉小编哦,谢谢大家的支持!

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值