盒子垂直水平居中方式总结

最新推荐文章于 2024-01-04 11:37:09 发布

转载最新推荐文章于 2024-01-04 11:37:09 发布 · 193 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dengfei201766/p/10330843.html

盒子正常显示模式下效果：

怎么实现居中呢？

1，粉红色盒子进行定位，子盒子绝对定位父盒子相对定位，top 、left各50%移动粉色盒子；

方式一：再减去盒子自身宽高一半，margin-top:-50px margin-left:-50px；

方式二：利用变形transform:translate,以盒子自身的高宽进行移动距离计算特点；

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>盒子垂直水平居中</title>
 5     <meta charset="utf-8">
 6     <style type="text/css">
 7         .d1{
 8             width: 300px;
 9             height: 300px;
10             border:  1px solid gray;
11             position: relative;
12 
13         }
14         .d2{
15             width: 100px;
16             height: 100px;
17             background: pink;
18             position: absolute;
19             left: 50%;
20             top: 50%;
21             margin-top: -50px;margin-left: -50px;方式一
22 
23             transform: translate(-50%,-50%);方式二，好处是盒子大小改变，不用改值。
24             
25         }
26     </style>
27 </head>
28 <body>
29     <div class="d1">
30         <div class="d2"></div>
31     </div>
32 </body>
33 </html>

居中效果：

转载于:https://www.cnblogs.com/dengfei201766/p/10330843.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30618985

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

一个盒子垂直水平居中的几种方法

qq_43692768的博客

11-01

1929

一个盒子垂直水平居中的几种方法总结效果展示： HTML代码： <div id="container"> <div id="box"></div> </div> css基本样式： #container { width: 100%; height: 600px; border: 1px solid black; } #box { width: 100px; height: 100px;

CSS解决未知高度的垂直水平居中自适应问题

09-27

今天有人问起，晚上试着写出来，供参考；以下代码兼容主流浏览器IE... 从最简单的开始………… 一、如何让一个DIV水平居中？这个简单不作过多说明！ [code] <style> body { text-align:center} #info{ margin:0

参与评论您还未登录，请先登录后发表或查看评论

盒子的垂直水平居中方式

lyclyc_的博客

06-16

198

在html中盒子有很多种垂直水平居中的方式，这里只写一种自己想记忆的 1，需要了解2D转换中的transform:translate(x,y),元素从当前位置移动到给定的x轴和y轴的位置给父盒子设置： position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); 给子盒子设置宽高下面插入一个例子 <!DOCTYPE html> <html lang="en"> <head>

一个盒子垂直水平居中的方法

qq_41865885的博客

10-20

188

flex方法 display：flex; justify-content:center; align-item:center; 定位首先子绝父相，然后子级盒子的top：50%；left：50%；tranform:translate(-50%,-50%); margin margin:0 auto;

盒子垂直水平居中

yshusencsdn的博客

08-03

276

盒子水平垂直居中

盒子水平垂直居中的几种方式

AHua~

06-09

234

1、元素垂直居中介绍在项目开发过程中，我们经常要实现将一个盒子水平垂直居中的效果 2、元素垂直居中的几种方式 1、使用Flex属性主轴交叉轴都居中代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ m

盒子水平垂直居中----3种方法

dgq2739710006的博客

06-02

333

我用的三种方法，当然常用的还是通过弹性盒来实现，一般用于移动端的时候，另外两种也可以，但在移动端使用弹性盒更方便，直接上代码了。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do

CSS 实现盒子水平居中、垂直居中和水平垂直居中….docx

11-24

CSS 盒子水平居中、垂直居中和水平垂直居中的实现方法在 CSS 中，实现盒子水平居中、垂直居中和水平垂直居中是非常常见的需求。本文将介绍五种不同的方法来实现这些效果，并对每种方法的优缺点进行分析。一、...

使用CSS实现盒子水平垂直居中的方法(8种)

01-18

原始代码： center.html： <!DOCTYPE html> <html lang=Zh> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0>...

CSS水平垂直居中的几种方法总结

09-24

通过设置元素的position属性为relative，并把left和top属性设为0，再将margin设为auto，可以实现水平居中。如果要同时实现垂直居中，需要将元素的height和line-height设置成相同的值。这种方法适用于已知宽度的元素...

盒子垂直水平居中的几种方法

qq_43477251的博客

09-13

191

一、定位 1、盒子宽高已知 <!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"> &l

盒子水平垂直居中的几种方法

weixin_45646245的博客

11-23

5840

第一种：盒子宽高 + margin 思路：上外边距为自身高度一半，左外边距为自身宽度一半： .box { width: 800px; height: 400px; border: 1px solid black; } .son { width: 400px; height: 200px; margin-top

实现盒子水平居中/垂直居中的方法

从入门到放弃_nys的博客

10-03

1778

盒子垂直居中/水平居中的方法）一、盒子水平居中1.margin: 0 auto;2.使用margin计算盒子左右边距3.定位实现4.盒子转为行内块元素，然后使用text-align属性二、盒子垂直居中1.定位实现2.使用表格的vertical-align: middle实现（借助display:table-cell）3.使用margin计算盒子上下边距一、盒子水平居中 1.margin: 0 a...

盒子水平垂直居中的四种方式(详细总结)

小柠檬爱编程

01-16

697

盒子水平居中的四种方式第一种当子盒子有固定宽高的时候这样来使用 <style> .father{ width: 500px; height: 500px; background-color: #ccc; position: relative; } .child{ width: 2...

css盒子垂直水平居中方法总结

qq_38086247的博客

06-09

361

经常使用到嵌套盒子居中的问题，使用使用弹性局部解决，使用使用比例，很多都用得初始熟。设置盒子外边框，使外盒子居中，左右外边框值相等（长度未知）水平居中:在div的position为relative（相对定位时有效，绝对定位无效） //盒子相对父盒子水平居中 margin: 0px auto ; // 2、不知道盒子长宽：垂直水平居中：top、right、bottom、left全为0...

实现盒子水平垂直居中的两种方式

qq_45587146的博客

12-10

527

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ .

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