前端基础——不知宽高如何居中

最新推荐文章于 2020-12-01 13:32:45 发布
最新推荐文章于 2020-12-01 13:32:45 发布
阅读量864 收藏 4
点赞数 2
分类专栏： 前端——基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42303885/article/details/85346047
版权
本文探讨了在前端开发中，当子元素的宽高未知时，如何实现其在父元素中水平垂直居中的四种方法，包括 CSS 属性的灵活运用和注意事项，特别是第四种方法可能引发的父元素 margin 失效问题。
摘要由CSDN通过智能技术生成

假设有两个盒子，不知道子盒子的宽高

  <div class="container">
    <div class="box"></div>
最低0.47元/天 解锁文章
[HTML]Web前端开发技术5.2（HTML5、CSS3、JavaScript ）CSS基础，decoration，selector，properties，Cascading——喵喵画网页
ormstq的博客
11-29 1795
CSS基础CSS继承与层叠使用CSS控制Web页面CSS选择器类型CSS选择器声明课后练习应用CSS链接外部样式表应用CSS导入外部样式表网页标题：类选择器的应用理解集体声明选择器的使用理解派生选择器以及通配符选择器（全局声明）的使用理解伪类选择器的使用网页标题：京东商品导购
HTML——表格 ※
最新发布
Junds0的博客
12-28 1066
这里介绍一个控制表格内文本方向的属性。本来表格有自带的属性align，也是控制文本方向的，不过现在浏览器大多不支持，都用 css 的另一个属性text-align来代替。不知你们有没有发现，表格的内容都是靠左的，在表格宽度比较大的情况下，是很明显的。在Begin-End区域创建你的第一个表格，它的边框宽度为5px，要求内容和效果图展示的一样。这关是对大家前面所学知识的一个总结和拓展，通过前面的学习，做一个表格是没有问题的。第二关虽然设置了宽、高，可是内容是紧挨着边框的，怎么使表格的内容和边框有间距呢？
宽高不定div水平、垂直居中
小男哥的博客
07-03 606
宽高不确定div居中 宽高不定的div水平垂直居中在前端页面布局中经常用到，它能够根据当前页面的大小做到自适应，使页面展示更协调；由于比较重要，因此在前端面试的时候此知识点会经常被问到。 水平垂直居中方式一：使用flex布局： <body> <div id="div1"> <div id="subDiv1"></div> </div> </body> <style> html,bod
div水平垂直居中（不知宽高情况下）
积累与备忘
12-23 304
在不确定div宽高的情况下，我们可以使用css3 css3 #container{ position:relative; } #center{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } flex #container{ dis...
水平自适应居中 宽高固定的div 宽高不知道的div 左右两边固定宽度div
怎样过不是过的博客
02-18 654
红色代码 ：图一  左右两边固定宽度div，（随屏幕宽度改变）中间div自适应填满中间的空间 紫色代码：图二  宽高固定的div，（随屏幕宽度改变）水平自适应居中 蓝色代码：图三 宽高不知道的div，（随屏幕宽度改变）水平自适应居中                                 .bl{width: 30px;height:100px;flo
如何实现一个未知宽高元素的水平垂直居中？
u014636613的博客
03-03 2627
以下是实现未知宽高元素水平垂直居中的三个方法： 方法1：通过定位和transform属性来实现 html: 实现未知宽高元素垂直居中的方法1：通过定位和transform来实现 css: &lt;style&gt; .parent{ width:100%; height:400px; background:#666; ...
JS实现在不知道盒子宽高的情况下，默认让盒子在页面中水平垂直居中
CherryLee_1210的博客
11-11 3508
当然在我们知道宽高的情况下， 1、我们通过CSS的中的绝对定位实现#box{ width:100px; height:100px; position:absolute; top:50%; left:50%; margin-top:-50px; margin-left:-50px; }2、通过CSS中的margin=auto,四个方向都为0的方
前端面试之水平垂直居中——几分钟搞定四种css水平垂直居方案
qq_39770065的博客
11-30 467
我们要对元素进行水平居中处理，核心的思想就是改变元素的位置，让元素轴中心处于容器中心即可。 为了让我们子元素位于父容器的中心，首先要脱离正常的文档流，相对于我们父元素进行定位。这样我们的移动才是针对父元素的。 方案： 一、margin负值（子元素操作） absolute是利用margin定位，定位点为左上角 原理： 绝对定位，相对父元素，且通过自身边界（margin）定位 那么我们设置 子元素top:50%和left:50%就实现了 左上角这个点的水平垂直居中 设置他的marginTop为高度一半负值
CSS笔记——千锋Ghost老师_2019前端入门
http____的博客
12-01 1550
B站千锋教育CSS基础语法CSS样式的引入方式CSS中的颜色表示法CSS背景样式CSS边框样式CSS文字样式CSS段落样式CSS复合样式CSS选择器CSS样式继承CSS优先级CSS盒子模型标签分类显示框类型标签嵌套规范overflow溢出隐藏透明度与手势最大、最小宽高CSS默认样式CSS reset（重置样式）float浮动position定位CSS添加省略号CSS圆角设置：border-radius CSS基础语法 格式：选择器{属性1: 值1; 属性2: 值2; …} 属性： • width、he
未知宽高div水平垂直居中3种方法
热门推荐
Abel.lin的专栏
10-25 1万+
未知宽高div水平垂直居中3种方法：1、transform与绝对定位方式。2、Flexbox方式。3、伪类方式
不固定宽和高的div 水平和垂直都居中
一直很安静
07-29 1万+
在写css的时候经常遇到的一个问题，当div没有固定的宽度或者高度的时候，如何才能让div水平或者垂直居中显示。 如果div有固定宽度的话，用padding，margin都很容易实现。方法有很多种。不过经常遇到这种div没有固定的宽度高度的情况，我们就不能用margin,padding设置固定的距离了。这个问题让很多人头疼。而怎么样才能让这个div居中显示呢？其实这种情况解决的办法也是有很多种，
前端居中方式
分外蓝
03-21 281
CSS 适配手机端语法 /* 即宽度小于等于420px时触发 */ @media (max-width: 420px){ .col-sm-6.col-md-3.adapt1 { position: relative; top: 2.5rem; } } /* 即宽度大于等于420px时触发 */ @media (min-width: 420px){ ...
位置宽高---居中【总结】
qq_26239917的博客
03-15 211
1.图片居中显示 father-box:text-center + line-height + font-size 0 img:vertical-align-middle //解释： 2.弹性盒子 align-items: center; justify-content: center; 3.定位 3.1 lbtr0 ma wh 3.2 translate(-50%,-50%) 4.图片居...
前端修炼基础篇--不固定宽高垂直水平居中
chongwanguan0670的博客
05-21 97
不固定宽高垂直水平居中 方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &lt...
宽高自适应及居中
乐我所乐的博客
11-16 377
一、宽高自适应 1.宽度自适应 语法：width:100%; 注： 1.块元素默认宽度为100%，继承父元素的宽度 2.宽度自适应通常运用在通栏效果中 2.高度自适应 语法：height:auto; 或者不设置高度 二、最小，最大高度，最小，最大宽度 1.最小高度 语法：min-height:数值+单位; 注： IE6不识别min-height属性，解决方案如下： a...
css 垂直居中_css两种常用的不定宽高的水平垂直居中方法，记住它，不再为样式发愁...
weixin_39810196的博客
11-29 90
喜欢就点击蓝字关注我们吧！我们在设计网页时，会大量的运用到水平垂直居中，如果知道元素的宽高，那水平垂直居中是很简单的，无非是用一下margin就可以完成，这里就不向大家做过多的解释了。但是，如果不知道元素的宽高呢？是不是就会在这上面用点心思了，接下来我给大家介绍两种我设计网页时常用的两种不定宽高的元素水平居中方法吧，放心绝对容易记。基础布局首先来创建一个html页面，html代码和c...
css未知宽高的盒子div居中的多种方法：方法2最实用
前端小白成长记
11-06 1073
原文链接：http://www.cnblogs.com/daysme/p/6366089.html 不知道盒子大小、宽高时，如何让盒子上下左右居中？ 应用场景：比如上传图片时，并不知道图片的大小，但要求图片显示在某盒子的正中央。   方法1：让4周的拉力均匀-常用   &lt;!-- Author: XiaoWen Create a file: 2017-01-13 13:46:47...
图片固定宽高居中
weixin_42861240的博客
02-18 507
效果图： 1、引入jq: 2、添加html部分（引用两张网上图片）: &lt;div class="box"&gt; &lt;div class="list"&gt;&lt;img src="https://timgsa.baidu.com/timg?image&amp;quality=80&amp;size=b9999_10000&amp;sec=1551061283&amp;
css未知宽高的盒子div居中的多种方法
dgce32897的博客
02-04 778
　　不知道盒子大小、宽高时，如何让盒子上下左右居中？ 　　应用场景：比如上传图片时，并不知道图片的大小，但要求图片显示在某盒子的正中央。 方法1：让4周的拉力均匀-常用 <!-- Author: XiaoWen Create a file: 2017-01-13 13:46:47 Last modified: 2017-01-13 14:05:04 Start t...
Web前端实验设计——Studeon页面制作
资源摘要信息:"Web前端实验三（1）" 知识点一：Studeon页面设计基础 Studeon页面设计是指在Web前端开发中创建和实现一个具有特定功能和外观的网页。这通常涉及使用HTML (HyperText Markup Language) 来构建网页的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值