css中让盒子垂直水平居中的三种方法

最新推荐文章于 2024-08-15 17:16:33 发布
最新推荐文章于 2024-08-15 17:16:33 发布
阅读量304 收藏
点赞数
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67251803/article/details/123400531
版权
本文探讨了网页布局中positioning的重要概念，对比了margin（外边距）与transform: translate(%)在移动元素时不影响其他元素的优势。理解并掌握这两者有助于创建精确且灵活的响应式设计。
摘要由CSDN通过智能技术生成

1.定位

top:50%;

left:50%;

magintop负父盒子高度的一半

maginleft负父盒子宽度的一半

2.四周的方位值设为零

top:0;

left:0;

right:0:

bottom:0;

magin:auto

 3.位移

left:50%;

top:50%;

 transform:translate:(-50% -50%)                                                                                                                                

magin与位移的区别

  • margin移动盒子会影响其余的盒子。把其他人挤走。

  • 位移translate移动盒子不会影响其他的盒子。不脱标。

  • 位移移动的时候可以写百分比，如果使用的百分比，移动的是盒子自身的宽度

 

白胡子的笑
关注
CSS-让盒子水平垂直居中的几种方式
zgq1259805541的博客
05-05 1389
<div class="box"> <div class="small">small</div> </div> .box { width: 300px; height: 300px; background: #ddd; } .small { width: 100px; height: 100px; background: skyblue.
[css]盒子水平垂直居中的6种方法
热门推荐
belloc_li的博客
02-17 1万+
让盒子水平垂直居中是前端很基础的知识，在前端的面试中也经常会考查到，今天我就整理总结一下盒子水平垂直居中的几种方法。 盒子的设定 父盒子：width: 400px; height: 500px; 子盒子：width: 100px; height: 100px; （当然也可以是其他数值，只是为了统一得到一个结果就提前给个设定） 预期结果 方法 1.定位法 利用子绝父相，给父盒子添加相对定位子盒子添加绝对定位 代码如下： <!DOCTYPE html> <html lang="en
CSS盒子垂直居中
MDCG99的博客
06-06 565
auto自适应，只对块级元素有用，对内联元素和内联块级元素无用。1.常用margin：auto 子绝父相。垂直方向的垂直居中不发生作用），此时子元素变为弹性子元素。（如果父元素使用了定位，则。弹性盒布局，给父元素设置。在已知子元素宽高的情况下。
css如何使一个盒子水平垂直居中
最新发布
2201_75773271的博客
08-15 728
方法三：利用 display：flex;方法二：利用 margin:auto;方法一：利用定位(常用方法,推荐）方法四：利用 transform。
css实现盒子的水平垂直居中的三种方法
ryyzxf的博客
08-31 558
css实现盒子的水平垂直居中的两种方法方法一方法二方法三 方法一 1.当使用position定位，margin-top、margin-left水平垂直居中时，先利用top:50%、left:50%将子盒子的左上角定位到父盒子的正中，然后使用margin-top:50%;margin-left:50%,完成。 //HTML、css <style> /* * { padding: 0; margin: 0; } *//*去掉所有元素内外边距
CSS盒子水平垂直居中方法集锦
m0_67805754的博客
04-23 9880
背景:开发中经常遇到盒子水平垂直居中的问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素,本文汇总了几种简单常用的盒子居中方法,希望可以对前端同行们有一定的帮助 初始html结构及css样式如图所示: 页面初始渲染效果: 下面给div盒子设置样式,实现居中效果 方法一:利用定位+margin:auto来实现 子盒子不设置宽高,则铺满整个父盒子(定位定在了四个角): 子盒子设置宽高和margin:auto效果 实现原理:父级设置为相对..
css盒子水平垂直居中(4种)
2301_76917834的博客
07-17 927
【代码】css盒子水平垂直居中(4种)
使用CSS实现盒子水平垂直居中的方法(8种)
01-18
原始代码： ... <!...<... <...meta name=viewport content=width=device-width, initial-scale=1.0>...link rel=stylesheet href=center.css> </head> <body> <div class=son><
CSS水平垂直居中的几种方法总结
09-24
CSS水平垂直居中技术是指在网页布局过程中，对页面中的一个或多个元素进行位置安排，使其在容器中水平和垂直方向上都处于中心位置的技术。水平垂直居中是Web前端开发中非常常见和重要的布局技巧，它能提高页面的视觉...
CSS 实现盒子水平居中、垂直居中和水平垂直居中….docx
11-24
实现盒子垂直居中的方法有多种，以下是三种常见的方法： 1. 方法一：使用 `position` 定位（适用于子盒子有宽度和高度的时候） 使用 `position: absolute;` 和 `top: 50%;` 可以实现盒子垂直居中，但这只适用于子...
CSS中设置盒子水平垂直居中的几种方法
Andrew_SJ的博客
05-20 229
CSS中设置盒子水平垂直居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl
CSS-盒子水平垂直居中的五大方案
weixin_43026567的博客
06-11 4269
文章目录定位：三种display: flexdisplay: table-cellJS实现 让.box在.wrapper中水平垂直居中。 HTML代码： <div class="wrapper"> <div class="box"></div> </div> 定位：三种 1. position：absolute 需要知道子盒子的具体宽高 2. margin: auto 需要子盒子有宽高，但不需要去考虑它的宽高是多少 3. css3新属性transfo
CSS让盒子水平垂直居中的六个方法
laoli360的博客
09-16 267
方法一 利用定位(常用方法,比较推荐) .parent { width: 500px; height: 500px; border: 1px solid #000; position: relative; } .child { position: absolute; width: 100px; height: 100px; border: 1
css使盒子垂直居中的方法
丰柏林的博客
08-12 1055
<!DOCTYPE html> <html> <head> <title>盒子垂直居中的方法</title> <style type="text/css"> /* 1.先让子盒子的上边缘和父盒子的水平中心线重叠，然后再让盒子往回移动自身的一半距离(父级相对定位，子级绝对定位) 2.使用表格的vertical...
css盒子水平居中方法
ADA668971986DA的博客
03-05 1319
方法一（定位）： 1、父元素position：relative 2、子元素position：absolute ，元素设置上下左右都为零值，margin设为auto div{ width: 100px; height: 100px; background-color: rgb(187, 111, 111); position: relative;} p{ width：50px; height：50px;
如何实现一个盒子水平垂直居中
m0_60695310的博客
09-15 179
一，利用定位法（推荐） .parent{ width:500px heigth:500px border:1px soild #000 position:relative } .child{ width:100px heigth:100px border:1px soild #000 position:absolute top:50% left:50% margin-top:-50px margin-left:-50
CSS3中如何让盒子实现水平和垂直居中
qq_51735681的博客
03-03 338
CSS3中如何让盒子实现水平和垂直居中： 这里给一个<div>父盒子和一个<p>子盒子作为研究对象，同时给一个行内元素<span>作为参考，代码如下： <body> <div> <p></p> </div> <span>123</span> </body> 先对div父盒子进行性质定义，代码如下： div {
CSS中的水平居中、垂直居中方法
Nisdin的博客
02-26 667
css水平垂直居中的快速方法
【css】盒子水平垂直居中的实现
weixin_47750287的博客
05-05 335
【css】盒子水平垂直居中的实现 一 HTML模板 先给出接下来用于测试的HTML模板 <style> .parent { width: 200px; height: 200px; background-color: skyblue; } .child { width: 100px; height: 100px; background-color: pink; } </style&
css让盒子垂直水平居中
04-01
可以使用以下方法让盒子垂直水平居中： 1. 使用flex布局 将父元素设置为flex布局，并设置justify-content和align-items属性为center即可实现垂直水平居中。 示例代码： ```css .parent { display: flex; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值