嵌套盒子，让子div在父div中居中

最新推荐文章于 2023-08-06 21:03:55 发布
最新推荐文章于 2023-08-06 21:03:55 发布
阅读量9.1k 收藏 4
点赞数 3
分类专栏： HTML5 文章标签： 盒子 HTML5 新手 样式 居中
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuemoKingDeath/article/details/70521299
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #parent{
            width: 300px;
            height: 300px;
            background-color: #cccccc;
            overflow: hidden;
        }
        #child{
            width: 150px;
            height: 150px;
            background-color: #FF6500;
            margin: 0 auto;
            margin-top: 75px;
        }
    </style>
    <title>嵌套的盒子</title>
    <!--解决方案
         1.为父盒子添加overflow：hidden
         2.为父盒子添加padding
         3.为父盒子添加border-->
</head>
<body>
   <div id="parent">
       <div id="child"></div>
   </div>
</body>
</html>
一只头秃的死肥宅
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
HTML网页滚动条使用整理_网页滚动条使用详解
天马3798
06-01 175
HTML Document 滚动条，自动出现；当网页内容超出浏览器可视宽度或者高度，滚动条自动出现；不同浏览器滚动条样式效果不同。1.js绑定2.jquery 绑定3.js滚动条监听：滚动条事件，操作滚动条滚动。
纯css多种方法实现div中单行文字、多行文字及嵌套div垂直水平居中
12-13
1.div中单行文字垂直水平居中。条件：外层div高度已经给定。代码如下： 复制代码代码如下: <style type=”text/css”> .div3{ border:1px solid red; text-align:center; height:200px; line-height:200px; ...
让div盒子居中的4种方式
BuLuoXu的博客
07-03 1万+
方案一：盒子有设置宽高，直接margin: auto;方案二：用position，left、right、top、bottom加margin调整 方案三：position + transform：translate，水平垂直方向都可居中，例如 方案四：用弹性盒模型flex
如何设置子div在父div中垂直居中显示？（已知或未知父div宽高的7种方法）
qq_36429258的博客
08-03 3052
如何设置子div在父div中垂直居中显示？（已知或未知父div宽高）
前端开发常用知识点一：如何设置子div在父div中垂直居中显示？
weixin_42396597的博客
12-25 3469
在前端开发中，要设置子div在父div中垂直居中的情况有很多，现通过学习一些博主的博客及日常项目实战，总结如下几种最常用的方法： 方法一：display:flex（这是小博主最常用的设置垂直居中的方法！） .parent { width: 300px; height: 200px; ...
子元素在父元素中水平和垂直居中的几种方法
最新发布
usernameID007的博客
08-06 2095
通过将父容器的display属性设置为flex，并设置justify-content和align-items属性为center，可以使元素在父容器中水平和垂直居中。通过将元素的position属性设置为absolute，以及使用top、left、right和bottom属性，可以将元素相对于其父容器进行定位。将父容器的display属性设置为table，将子元素的display属性设置为table-cell，并使用vertical-align属性设置为middle，可以实现元素在父容器中垂直居中。
div嵌套居中的三种方法
shenyuhan的博客
10-20 2031
div嵌套居中的三种方法
CSS中让DIV居中的代码
12-13
CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可是事实上这样的方法科学吗? 经过网络搜索和...
CSS中怎么让DIV居中亲自实验得出的结论
09-25
用CSS碰到个很棘手的问题，DIV本身没有定义自己居中的属性，网上的方法都是用上级的text-align: center然后嵌套一层DIV来解决问题，经过网络搜索和亲自实验得出以下结论，感兴趣的朋友可以参考下
DIV居中及DIV垂直居中.html
05-16
该html代码是实现DIV居中及DIV垂直居中的实例,包括: div居中, div内文本居中及垂直居中, div嵌套div并居中, div嵌套div并垂直居中.
使用CSS把Div放在屏幕中间。
热门推荐
dogfish的专栏
09-19 1万+
简单实录一下代码。看看各位是否有用。 body, form{padding:0px; margin:0px;} body{overflow:hidden;} #divMain{width:100%; height:100%; border:1px solid black; background-color:#ffffff; overflow:auto;}
如何让div实现居中效果
心如止水
08-25 1万+
方法一：常见的居中方法，定位 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> /*常见的居中:定位方法*/ .father{ widt...
DIV居中的几种方法
MissGeng的博客
03-30 1007
1. body{ text-align:center; } 缺点：body内所有内容一并居中 2. .center{ width:500px; margin: 0 auto; } 缺点：需要设置div宽度 3. .center{ margin: auto; position: absolute; left:
让父级div中子div居中的方法
Almond's Blog
11-30 4434
 HTML代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"
html+css实现子div在父div中居中
Constance_Majesty的博客
07-14 4262
html+css 在各种情况下实现子div在父div中居中。
子div 在 父div中 水平居中对齐
黄彪博客
09-07 1515
.div_center{ margin: 5px auto; }   展示效果   说明： 1、div 是块对象，默认占一行 2、如果设置了margin 的宽度，则div还是占一行，但是这一行应该是父div宽度的100% 减去 左右margin的宽度。    
实现子Div在父Div中水平居中的一种方法
qq_24193261的博客
08-05 334
父Div中设置     text-align:center; 子Div中设置:     margin-left:auto:     margin-right:auto; 或     marigin:0 auto;
div中嵌套div水平垂直居中
weixin_33738982的博客
05-15 1362
div中嵌套一个居中的div有很多方法，如果不想调整边距，有一个简单的方法： 1 <div align="center" style="width: 200px;height: 200px;background: green;display: table-cell;vertical-align: middle;"> 2 <div style=" w...
小div在大div里面水平垂直都居中的实现方法
anmi7832的博客
09-04 353
关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种，下面仅列举了常用的几种。 首先看一下要实现的效果图及对应的html代码： <div class="parent"> <div class="child"> </div> </div> 方法一：使用...
css中div的嵌套如何使得其水平居中
05-26
可以使用以下的CSS样式来使得一个 `div` 元素在其容器中水平居中： ```css .container { display: flex; /* 使用 flex 布局 */ justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ }...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值