如何让div容器水平居中显示在父容器中

最新推荐文章于 2024-09-04 12:52:05 发布
最新推荐文章于 2024-09-04 12:52:05 发布
阅读量9.6k 收藏 1
点赞数
分类专栏： web开发 文章标签： div 浏览器 float html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/smstong/article/details/6174857
版权

（1）正确的DOCTYPE类型设置，让浏览器以标准模式渲染html,css
（2）div设置宽度值，margin-left,margin-right设为auto
（3）div不使用浮动，即保持默认的float:none

以上三者缺一不可，下面是一个例子：

<!DOCTYPE html>
<html>

<HEAD>

<style type="text/css">
body
{
 margin:0;
 padding:0;
}

#wraper
{
 width:1000px;
 margin: 0 auto;
 border:red solid 2px;
}

</style>
</HEAD>

<BODY>
<div id="wraper"></div>
</BODY>

</HTML> 

smstong
关注
专栏目录
子div在父div中居中,方便自己以后查找
Web_Student的博客
04-23 780
子div在父div中居中 方法一（使用绝对布局）： 弊端：必须要知道这个容器的长宽，因为在子元素中的 margin-top:-100px; margin-left:-100px; 这两个样式分别是子元素长、宽的一半 .father { 　　width: 500px; 　　height: 500px; 　　position: relative; 　　background-color: red; } ...
div中的div在父容器中水平居中或者垂直居中
weixin_30912051的博客
03-26 716
在我们平时开发中会遇到一个问题，比如页面宽度和高度都要适合浏览器的高度和宽度，也就是自适应 比如 1 <div style="width:100%;height:100%;"> 2 <div>我们想叫这个div水平居中</div> 3 </div> 那我们首先要知道div是块级元素，想叫他水平居中我们这样设置他的三个...
如何使div居中？CSS居中终极指南
2303_76218115的博客
09-04 1700
接触前端这么多年来我曾把 CSS 看作是一系列模式的集合，实际上有很多方法可以用来解决当前遇到的问题。这种方法虽然能奏效，但也感觉有些局限。时不时地一些看似正常的代码会突然出现问题实际运行效果和以前完全不同。花时间深入学习 CSS 时之前老旧的固定方式，而是能够凭直觉灵活的来解决问题！✨在本文中探讨了一些实用的居中模式，希望它们能在你需要居中对齐时派上用场。其这也只是触及了CSS 中居中对齐的冰山一角！与其死记硬背更多的代码片段，不如建立一个全面的 CSS 理解模型，这样可以即时提出解决方案！
如何让子div在父div中水平居中？
yuanyuan_186的专栏
04-23 7529
http://zhidao.baidu.com/question/1366818280011827819.html html> head> style> #box{     border: 1px solid gray;     width: 100%; }  #zhongjian{     height: 120px;      w
实现子Div在父Div中水平居中的一种方法
qq_24193261的博客
08-05 352
父Div中设置     text-align:center; 子Div中设置:     margin-left:auto:     margin-right:auto; 或     marigin:0 auto;
子div在父div中水平垂直居中
LikeP的博客
09-19 517
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { margin: 0; ...
让DIV水平垂直居中的两种完美方法推荐
09-24
在网页布局中，将一个DIV元素在其父容器中水平垂直居中是一个常见需求。本文介绍了两种实用的方法来实现这一目标，这两种方法分别基于传统的CSS布局技术以及CSS3中的transform属性。 第一种方法利用负的margin值来...
经常用的图片在容器中的水平垂直居中实例
10-30
### 图片在容器中的水平垂直居中方法 #### 背景介绍 在网页设计与开发过程中，将图片（特别是那些尺寸未知的图片）在指定的容器内进行水平和垂直居中是一项常见的需求。这种布局技巧不仅可以提升用户体验，还能使...
在DIV中图片垂直/水平居中(最简单方法).rar
07-03
在网页设计中，将图片在div中垂直和水平居中是一项常见的需求，这涉及到CSS布局技术的运用。本文将深入探讨如何使用最简单的方法来实现这个目标，同时也会涉及JavaScript（JS）的一些特效，尽管在描述中没有明确指出...
CSS常见的让元素水平居中显示的方法
01-19
用CSS让元素居中显示并不是件很简单的事情—同样的合法CSS居中设置在不同浏览器中的表现行为却各有千秋。...在实际使用中，我们可以为这些需要居中的元素创建一个起容器作用的div。需要特别注意的一点就是，必须为
转载未知大小的图片在一个已知大小容器中的水平和垂直居中（二）
10-31
### 转载未知大小的图片在一个已知大小容器中的水平和垂直居中（二） #### 知识点概述 本文主要介绍了如何在一个已知大小的容器内将未知大小的图片进行水平和垂直居中的方法。该技术适用于多种浏览器环境，包括IE5...
div在父元素中的居中问题
dianzhuanou1109的博客
01-25 785
方法一：定位方法 <div class="parent1"> <div class="child1"> content1 </div> </div> .parent1{ position:relative; height:300px; width:30...
子div在父div中居中显示问题
qq_34898847的博客
09-11 5887
子div在父div中居中显示几种css方法 父的div中有一个子的div，让子div在父div的居中显示。 上代码 1：方法一 这方法最好使，我常用的方法 .parent { width:800px; height:500px; border:2px solid #000; position:relative; ...
让div水平居中的7种方法
m0_55673399的博客
07-26 3万+
使div水平居中
前端开发常用知识点一：如何设置子div在父div中垂直居中显示？
weixin_42396597的博客
12-25 3510
在前端开发中，要设置子div在父div中垂直居中的情况有很多，现通过学习一些博主的博客及日常项目实战，总结如下几种最常用的方法： 方法一：display:flex（这是小博主最常用的设置垂直居中的方法！） .parent { width: 300px; height: 200px; ...
【CSS】使元素在父元素中居中显示的几种方法
qq_65225350的博客
03-28 2248
这种方法需要把父元素和子元素的宽度固定，然后利用二者宽高之差添加边距移动元素的位置现在创建了一个父元素box1中包含了一个子元素box2,下边的许多案例都会使用这个盒子样式子元素默认在父元素的左上角位置，因为已经知道父元素和子元素的宽高，因此可以使用二者之差的二分之一作为边距宽度即可。
如何使容器及其内容居中？
爱撒娇的披萨
12-24 1762
1.使用line-height（行高） 假如这个字体的字高是20px，而line-height是50px，那么字体会放在1个50px的无形的盒子里，并自动垂直居中，也就是这个字体离顶端和底部各15px。然后再放到50px高的div里，那自然是垂直居中的了。即设置height=line-height可以使文字上下垂直居中，再使用text-align: center;便可使文字在容器中居中。 <div style="border: 1px #f00 solid;height: 200...
CSS——几种让一个容器水平垂直居中的方法
lwpoor123的博客
07-17 3050
让一个容器水平垂直居中有多种方法，下面介绍简单的几种：方法一：position加margin 方法二： diaplay:table-cell 方法三：position加 transform 方法四：flex;align-items: center;justify-content: center 方法五：display:flex;margin:auto
让div居中的方式的几种方法
热门推荐
恒二哥的博客
11-04 7万+
div垂直居中的几种方式
vue中如何让容器div居中
最新发布
10-24
在 Vue 中，让一个容器 `div` 居中可以通过几种方法实现。这里我会介绍两种常见的方法： **方法一：使用 CSS Flexbox** ```html <div class="container"> <slot></slot> <!-- 这里放你的内容 --> </div> <style scoped> .container { display: flex; /* 声明为 Flex 容器 */ justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ height: 100%; /* 如果父元素没有高度，可设置为100vh或自适应 */ } </style> ``` **方法二：使用 CSS Grid** ```html <div class="container"> <slot></slot> </div> <style scoped> .container { display: grid; place-items: center; /* 同时水平垂直居中 */ height: 100%; /* 见上 */ } </style> ``` **方法三：JavaScript + CSS（适用于动态布局）** ```javascript data() { return { containerStyles: {} } } mounted() { this.containerStyles = { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }; // 或者使用计算属性 // this.containerStyles = computed: () => ({ // position: 'absolute', // top: `${this.$el.offsetHeight / 2}px`, // left: `${this.$el.offsetWidth / 2}px`, // transform: 'translate(-50%, -50%)' // }); } <style scoped> .container { /* 不需要额外样式，因为JS已经设置了定位 */ } </style> ``` 以上方法都假设你的 `div` 是在一个有固定高度的祖先元素内部，如果没有，可能需要调整 CSS。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值