html,body区域添加一个水平垂直居中的盒子

最新推荐文章于 2022-11-21 21:02:08 发布
最新推荐文章于 2022-11-21 21:02:08 发布
阅读量488 收藏 2
点赞数
原文链接：http://www.cnblogs.com/wrestle-mania/p/6932837.html
版权 
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css" media="screen">
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         html,body{
12             width: 100%;
13             height: 100%;
14         }
15         body{
16             display: flex;justify-content: center;align-items: center;
17         }
18         .box{
19             width: 500px;
20             height: 500px;
21             border: 1px solid #ccc;
22         }
23     </style>
24 </head>
25 <body>
26     <div class="box">
27         
28     </div>
29 </body>
30 </html>

自己经常喜欢写一些测试代码，就希望在显示器的正中显示该盒子，其实就是这么简单的一段代码，还有使用传统的方式来实现居中的，有时间写写

转载于:https://www.cnblogs.com/wrestle-mania/p/6932837.html

dicishi0158
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
盒子居中的十种居中方式
weixin_46195945的博客
09-09 278
1.第一种： 利用margin，div1的宽减去div2的宽就是div2margin-left的数值：（100-40）/2=30 div1的高减去div2的高就是div2margin-top的数值：（100-40）/2=30 <html> <head> <meta charset="UTF-8"> <title>demo</title> </head> <body>
一个盒子垂直水平居中的方法
qq_41865885的博客
10-20 139
flex方法 display：flex; justify-content:center; align-item:center; 定位 首先子绝父相，然后子级盒子的top：50%；left：50%；tranform:translate(-50%,-50%); margin margin:0 auto;
盒子几种居中的方法
qq_44902858的博客
11-29 7680
水平居中 方法一：给div设置宽度后将margin的上下设为0，左右设为auto <div class="box"></div> body{ margin: 0; padding: 0; } .box{ width: 300px; height: 200px; background-color: aqua; margin: 0 auto; } 效果： 方法二：使小盒子
怎么将html追加到body,javascript – 如何将一个body元素添加到空DOM文档中？
weixin_39998859的博客
06-04 1084
由于我们比最初接受的答案多了几年,我想提供一个更现代的答案.在Firefox 50.0.2中,您可以这样做：document.body = document.createElement("body");document.body.innerHTML = "Hello World!";这里创建了主体并直接分配给“document.body”.一些阅读(https://html.spec.whatwg...
html盒子在body居中,使用CSS实现盒子水平垂直居中的方法(8种)
weixin_33122947的博客
06-10 1382
原始代码：center.html：Centercenter.css：body {background-color: #6ed0ff;}.father {background-color: #be33ec;border-radius: 20px;box-shadow: 0 0 15px rgb(0, 0, 0);margin: 100px auto;width: 300px;height: 300p...
使用CSS实现盒子水平垂直居中的方法(8种)
01-18
原始代码： center.html： <!DOCTYPE html> <html lang=Zh> <head> <...meta name=viewport content=width=device-width, initial-scale=1.0>...body> <div class=son><
CSS解决未知高度的垂直水平居中自适应问题
09-27
今天有人问起，晚上试着写出来，供参考； 以下代码兼容主流浏览器IE... 从最简单的开始………… 一、如何让一个DIV水平居中？ 这个简单不作过多说明！ [code] <style> body { text-align:center} #info{ margin:0
弹窗居中的简单实现方法
09-24
这种方法利用了CSS中的`position: fixed`属性，结合`display: inline-block`和`vertical-align: middle`来实现垂直居中，同时通过调整外层盒子的尺寸使其充满整个屏幕，从而达到水平居中的效果。 1. **定义外围盒子...
HTML热门面试题及详细解析
04-09
要让一个不定宽高的 DIV 垂直水平居中，可以使用 CSS 方法：父盒子设置 `display: table-cell; text-align: center; vertical-align: middle;`，Div 设置 `display: inline-block; vertical-align: middle;`。也可以...
html+CSS考试试题
04-21
- **知识点**: 当两个垂直外边距相遇时，它们将会合并成一个较大的外边距。 - **题目分析**: 本题考察外边距合并的概念。 - **正确选项**: (A) 外边距合并。 2. **水平居中对齐** - **知识点**: 可以通过设置`...
CSS盒子在页面居中的5种常用方法|auto,flex,position的应用
小白学习笔记分享，记录学习过程，个人水平有限
11-21 7351
介绍5种常见的盒子在页面居中的方法;使用的CSS知识点: 定位; margin: auto; flex布局;能使盒子始终在浏览窗口居中;1.最简单的方式实现水平居中:margin: 0 auto; 原理 : 块级元素独占一行设置大小后水平方向会剩余空间,设置auto左右会自动分配剩余空间;适用于body的子标签在页面居中; 盒子在其父盒子内居中;注意*盒子需要设置宽度才有效; 行内元素无效
html常见盒子居中小结
热门推荐
a785975139的博客
12-04 4万+
html常见盒子居中小结     在写界面时，经常被元素居中的问题困扰。经过一番查阅资料和摸索，鄙人实践出了一套常见元素居中的办法，现在记录下来，以便日后参考。     元素在标准文档流和非标准流中的表现有所不同，所以居中方法也要分开来进行说明。     一、标准文档流 标准文档流里，元素被分为块级元素和行内元素。常用的块级元素有div、h1~h7、li等，它们能够设置宽和高；如果不显示设
如何让DIV相对于body水平和垂直居中
belucky_888888的专栏
01-06 1833
我们在设计页面的时候，经常要把DIV居中显示，而且是相对页面窗口水平和垂直方向居中显示，如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让DIV居中。在本文中，我将给大家讲述如何用CSS和jQuery两种方法让DIV水平和垂直居中。 CSS让DIV水平居中 说明，本文中所指的DIV包括HTML页面中所有的元素。 让一个DIV水平居中，直接用CSS就可以做到。只要设置了DIV的宽度，...
HTML 垂直居中body中的应用
怪咖先森的博客
07-30 4320
应用场景: 在body中书写一个代码块, 使其相对于body垂直居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1....
html 垂直水平居中的两种方法
小米粒的博客
03-04 436
<!DOCTYPE html> <html> <head> <title>123</title> </head> <body> <div class="dv1" style="width:200px;height:300px;border:1px solid #ccc;"> <p>我们们们们们们们们们们们们们们们们们们们们们</p> </div> <.
h5页面的body页面水平垂直居中代码
qq_43408070的博客
12-11 1368
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ display: inline-block; /* padding: 0; */ } .child{ width: 200px; height: 200px; .
盒子居中方法
weixin_30244681的博客
04-16 223
布局中经常会遇到让一个盒子水平且垂直居中的情况，以下总结了几种居中方法： margin固定宽高居中 负margin居中 绝对定位居中 table-cell居中 flex居中 transform居中 不确定宽高居中（绝对定位百分数） button居中 不兼容IE低版本的可以用其他方法hack。 不多说，直接上代码： 大多数方法的html都相同，所以写一个了，不同的再单独写出来。 （de...
html中盒子垂直水平居中的方式(目前总结的有六种方式，持续更新中)附有代码详解
lyclyc_的博客
06-16 6327
（1）用margin负边距实现带着宽度属性和高度属性的绝对定位的元素的居中。 （2）margin:auto;实现带有width属性和height属性的绝对定位元素的居中。 （3）用transform:translate(x,y) 代码展示如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt
让一个盒子在浏览器页面垂直水平居中
最新发布
09-01
使用 CSS 可以让一个盒子在浏览器页面垂直水平居中。方法是将该盒子的定位设为绝对定位，并使用 margin 属性将其上下左右外边距设为负值的一半。代码示例如下： ``` .center-box { position: absolute; top: 50%;...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值