div在html的body中居中对齐（水平 垂直）

最新推荐文章于 2024-02-16 09:39:04 发布
最新推荐文章于 2024-02-16 09:39:04 发布
阅读量2.6k 收藏 2
点赞数 3
分类专栏： html 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fivestar2009/article/details/128304335
版权

<!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">

    <title>块居中</title>

    <style>

        *{

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }

         html,body{/*一定要有这个html的设置，否则 div不会垂直居中对齐*/

            height: 100%;

        }

        body{

            display: flex;

            height: 100%;

        }

        .box{

            width: 1050px;

            height: 600px;

            margin: auto;

            background-color: aqua;

           

            display: flex;

            justify-content: center;

            align-items: center;

           

        }

    </style>

</head>

<body>

    <div class="box">

        this is centerabbbcc

       

    </div>

</body>

</html>

fivestar2009
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html如何使body的内容居中显示,css里面怎么让body内容居中
weixin_42511270的博客
06-09 1万+
css里面让body内容居中的方法：1、使用margin设置边距“0 auto”让HTML页面中所有的元素水平居中；2、将div距离页面窗口左边框和上边框的距离设置为“50%”；3、通过jQuery实现水平和垂直居中。本教程操作环境：Windows7系统、HTML5&&CSS3版，DELL G3电脑。我们在设计页面的时候，经常要把DIV居中显示，而且是相对页面窗口水平和垂直方向居中...
css三种方法实现div在浏览器水平居中
09-27
通过将元素的左右外边距设置为自动，浏览器会自动计算并分配外边距，使得元素在容器中居中对齐。关键代码如下： ```css div { margin: 0 auto; width: 960px; } ``` 此方法适用于固定宽度的元素，并且要求元素的...
全面掌握主流CSS布局（水平居中+垂直居中+居中布局）
NolanKy 的 技术博客
10-22 1012
一，水平居中布局 1、行内元素水平居中 父级元素设置text-align: center ——>实现在块级元素内部的行内元素（inline/inline-block/inline-flex/inline-table）水平居中 <div class="parent"> <div class="child">dome</div> </div> <style> .parent{ text-align: center
让div在body中居中显示
qweasdzxc_1092665276的博客
03-24 4571
转摘自：https://www.cnblogs.com/ferron/p/4251900.html。谢谢大神分享。 如何让DIV相对于body水平和垂直居中 我们在设计页面的时候，经常要把DIV居中显示，而且是相对页面窗口水平和垂直方向居中显示，如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让DIV居中。在本文中，我将给大家讲述如何用CSS和jQuery两种方法让DIV水平和垂直居中。...
HTML学习笔记——各种居中对齐
物联网 IoT 经验分享
06-11 6万+
0.前言     水平居中基本方法——指定块的宽度并设定块的左右外边距为auto，上下外边距可取0，那么该块可以在父元素中水平居中。 样式如下： 1：margin:0px auto 2：margin-left:auto; margin-right:auto;     垂直居中基本方法——设定块的上下内边距相等。 样式如下：     padding-top:20px; paddin
CSS-居中方法总结
qq_43681073的博客
04-21 614
常见CSS居中方法1. 水平居中1.1 文本级居中1.2 块级居中2. 垂直居中2.1 文本级居中2.2 块级居中 1. 水平居中 1.1 文本级居中 文本、或具有inline特性的元素，想要使其居中，则设置文本所在容器、或具有inline特性元素的父元素设置如下属性： 元素 { text-align: center; } 实例： div{ width: 100px; height: 100px; border: 5px solid black; text-align: center; } &l
javascript实现在指定元素中垂直水平居中
11-25
在网页设计中，元素的垂直水平居中是一个常见的需求，特别是在动态布局或者响应式设计中。本节将探讨如何使用JavaScript结合CSS实现未知宽高元素在指定容器中的垂直水平居中效果。 首先，我们来看一个具体的例子，...
如何让图片相对于上层DIV始终保持水平、垂直都居中
09-25
3. `vertical-align:middle`：通常用于表格单元格，此属性使元素在垂直方向上居中对齐。在这里，我们通过设置`display: table-cell`使Div元素表现得像一个表格单元格，从而激活`vertical-align`属性。 4. `display:...
使用绝对定位+负外边距让DIV层水平垂直居中页面
12-02
这里我们将详细探讨如何利用绝对定位和负外边距来实现一个DIV层在页面中的水平垂直居中，并考虑窗口大小变化时的动态调整。 首先，我们要明白CSS的定位机制。在CSS中，定位主要有静态定位、相对定位、绝对定位和...
CSS 将两个button按钮垂直+水平居中
01-20
在CSS布局设计中，将元素垂直和水平居中是一项常见的需求。在这个问题中，我们将讨论如何使用CSS将两个button按钮实现垂直和水平居中的方法，主要聚焦于一种使用`position: absolute`和`margin: auto`的技术。这种...
html居中的几种方法
最新发布
weixin_53211817的博客
02-16 4615
2、利用text-align:center可以讲块级元素内的文字图片等水平居中。1、我们可以利用"margin:0 auto"来设置元素水平居中。3、利用弹性布局：display:flex。4、利用定位+margin：auto。
不确定盒子的上下左右居中
s3248149993的博客
08-23 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"> <title&
页面垂直居中实现方法（HTML/CSS）
TdMaster的博客
10-02 2376
Flexbox是CSS3中引入的一种弹性盒子布局模型，它提供了简单而强大的方式来实现元素的居中对齐。您可以根据具体的需求和兼容性考虑选择其中的一种方法来实现您的网页布局。本文将介绍几种常用的方法，以实现HTML/CSS中的页面垂直居中效果。元素的高度设置为100%，这是为了让页面占据整个视口的高度。元素的高度设置为100%，并将它们的定位设置为相对定位。元素的高度设置为100%，并将它们的显示属性设置为表格布局。另一种方法是使用表格布局来实现页面的垂直居中。，我们将内容区域的左上角定位在父元素的中心点。
实现垂直水平居中的几种方法
bobringtheboys的博客
08-05 298
实现垂直水平居中的几种方法 <body> <div id="box1"> <div id="box2"></div> </div> </body> 一、已知需要居中盒子的宽高 1.需要居中的盒子绝对定位，设置top:50%;left:50%;margin-top:负高度的一般;margin-left:负宽度的一半。 #box1{ width: 300px; height:300px;
html盒子在body居中,使用CSS实现盒子水平垂直居中的方法(8种)
weixin_33122947的博客
06-10 1372
原始代码：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...
div标签在body里水平垂直居中
孙悟空空的专栏
01-02 4896
水平居中： div标签在整个body里居中的方法用CSS控制即可，body{text-align:center;} .box{margin: 0 auto;} 类box就是在整个body里水平居中 垂直居中：div在body里的垂直居中用CSS控制都不是很有效果，所以用js来控制比较管用,代码如下（jQuery）: function SetPostion(){         var whe
html中div内容居中的方法
热门推荐
火星男孩的分享空间
03-27 7万+
方法1：table-celldiv中的内容居中：不改变盒子尺寸。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { background-color: red; widt
HTML之居中设置
木四小哥的博客
08-31 7万+
目录 水平居中 行内元素 定宽块级元素 不定宽块级元素 垂直居中 隐性改变display类型   水平居中 实际开发过程中我们会遇到很多需要元素水平居中的情况，例如文章标题等。这里常见的水平居中情况有行内元素和块级元素两种，块级元素又分为定宽块级元素和不定宽块级元素两种情况。定宽块级元素顾名思义就是块级元素的width是个固定的值；那么不定宽块级元素我们就知道是块级元素的widt...
div在body中水平垂直居中
fivestar2009的博客
05-02 1820
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>水平垂直居中与body</title> <linkrel="stylesheet"type=...
让body中的块水平居中
05-29
要让body中的块级元素在水平方向上居中，可以使用以下CSS： ``` body { display: flex; justify-content: center; } ``` 这样，body中的所有块级元素都会在水平方向上居中。如果你只想让某个块级元素在水平方向...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值