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

最新推荐文章于 2024-06-18 19:41:46 发布
原创 最新推荐文章于 2024-06-18 19:41:46 发布 · 3k 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#html #css #前端
本文介绍了一种使用CSS实现块元素水平垂直居中的方法。通过设置HTML和body的高度为100%并利用flex布局，使得包含div能够在其父容器内居中显示。此方案适用于固定宽度和高度的元素。

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

div元素的水平垂直居中
最新发布
testleaf.cn
12-03 1636
可以选择以上任意一种方法来实现div元素的水平垂直居中。Flexbox 和 CSS Grid 是现代布局的首选方法，因为它们更简洁和强大。
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布局（水平居中+垂直居中+居中布局）
NolanKy 的 技术博客
10-22 1179
一，水平居中布局 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
HTML之居中设置
热门推荐
大编码时代的一介Coder
08-31 7万+
目录 水平居中 行内元素 定宽块级元素 不定宽块级元素 垂直居中 隐性改变display类型   水平居中 实际开发过程中我们会遇到很多需要元素水平居中的情况，例如文章标题等。这里常见的水平居中情况有行内元素和块级元素两种，块级元素又分为定宽块级元素和不定宽块级元素两种情况。定宽块级元素顾名思义就是块级元素的width是个固定的值；那么不定宽块级元素我们就知道是块级元素的widt...
html居中的几种方法
weixin_53211817的博客
02-16 7742
2、利用text-align:center可以讲块级元素内的文字图片等水平居中。1、我们可以利用"margin:0 auto"来设置元素水平居中。3、利用弹性布局：display:flex。4、利用定位+margin：auto。
让div在body中居中显示
qweasdzxc_1092665276的博客
03-24 4846
转摘自：https://www.cnblogs.com/ferron/p/4251900.html。谢谢大神分享。 如何让DIV相对于body水平和垂直居中 我们在设计页面的时候，经常要把DIV居中显示，而且是相对页面窗口水平和垂直方向居中显示，如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让DIV居中。在本文中，我将给大家讲述如何用CSS和jQuery两种方法让DIV水平和垂直居中。...
css 元素居中
cnkeysky的博客
02-23 118
css 元素居中
div内元素居中（水平居中、垂直居中、水平和垂直都居中）
Pei71320的博客
03-26 6049
1. 水平和垂直都居中 效果图 相关代码 <!-- html相关代码 --> <div id="outer"> <div id="insider"></div> </div> /* css相关代码 */ html, body { width: 100%; height: 100%; } ...
负margin的经典利用之用绝对定位来居中
GiGiTea的博客
10-28 484
使用绝对定位将div定位到body的中心，然后使用负margin（content宽高的一半），将div的中心拉回到body的中心，已到达水平垂直居中的效果。 #test{border: 2px solid #000; width: 200px;height: 200px;position: absolute;left: 50%;top: 50%;margin:-100px;}
HTML学习笔记——各种居中对齐
物联网 IoT 经验分享
06-11 7万+
0.前言     水平居中基本方法——指定块的宽度并设定块的左右外边距为auto，上下外边距可取0，那么该块可以在父元素中水平居中。 样式如下： 1：margin:0px auto 2：margin-left:auto; margin-right:auto;     垂直居中基本方法——设定块的上下内边距相等。 样式如下：     padding-top:20px; paddin
CSS-居中方法总结
qq_43681073的博客
04-21 942
常见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
不确定盒子的上下左右居中
s3248149993的博客
08-23 305
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页面body里的元素居中方法
LiuZnHi的专栏
05-25 1万+
在写H5页面时，经常遇到把body里的元素居中的要求，每次都需要现查，现在整理出来。如下： body { max-width:660px; margin: 0 auto; } ps:max-width参数，根据自己的实际需要调整大小。 ...
页面垂直居中实现方法（HTML/CSS）
TdMaster的博客
10-02 3421
Flexbox是CSS3中引入的一种弹性盒子布局模型，它提供了简单而强大的方式来实现元素的居中对齐。您可以根据具体的需求和兼容性考虑选择其中的一种方法来实现您的网页布局。本文将介绍几种常用的方法，以实现HTML/CSS中的页面垂直居中效果。元素的高度设置为100%，这是为了让页面占据整个视口的高度。元素的高度设置为100%，并将它们的定位设置为相对定位。元素的高度设置为100%，并将它们的显示属性设置为表格布局。另一种方法是使用表格布局来实现页面的垂直居中。，我们将内容区域的左上角定位在父元素的中心点。
div标签在body里水平垂直居中
孙悟空空的专栏
01-02 5086
水平居中： div标签在整个body里居中的方法用CSS控制即可，body{text-align:center;} .box{margin: 0 auto;} 类box就是在整个body里水平居中 垂直居中：div在body里的垂直居中用CSS控制都不是很有效果，所以用js来控制比较管用,代码如下（jQuery）: function SetPostion(){         var whe
实现垂直水平居中的几种方法
bobringtheboys的博客
08-05 409
实现垂直水平居中的几种方法 <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 1535
原始代码：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...
HTML·设置body中内容居中
滴_的专栏
09-15 4万+
String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> "> 扫描结果
HTML中的文本居中
qq_42194101的博客
06-18 9892
本文将详细介绍如何在HTML中实现文本居中，包括使用不同的HTML标签和CSS属性来达到这一目的。
html如何将元素整体居中,html元素水平居中的方法
weixin_39828956的博客
06-01 595
html元素水平居中的方法html元素 水平垂直居中 于 其父级元素的方法：方法1：代码如下:上下左右居中方法1代码如下:html,body,p{margin:0;padding:0;height:100%;position:relative;}.wrap{width:400px;height:300px;margin:10px;border:1px solid #000;}.all-middle...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值