方法一、小div绝对定位或相对定位，这样小div脱离标准流，大div有固定宽高，用小div的margin去挤大div
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Title</title><style>
.father{
width: 600px;
height: 600px;
background-color: orangered;
}
.son{
width: 300px;
height: 200px;
background-color: lawngreen;
position: absolute;
margin: 200px 150px;
}
</style></head><body><div><div></div></div></body></html>
注意：如果小div没有绝对定位或相对定位，且大div没有border，那么小div的margin实际上踹的是“流”，踹的是这“行”。如果用margin-top，大div整体也掉下来了。如下：
方法二、如果给大div加一个border，使大div，小div都不定位，用小div的margin去挤大div，实现小div居中。
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Title</title><style>
.father{
width: 600px;
height: 600px;
background-color: orangered;
border: 1px solid white;
}
.son{
width: 300px;
height: 200px;
background-color: lawngreen;
margin: 200px 150px;
}
</style></head><body><div><div></div></div></body></html>
显示结果如下：
方法三、小div绝对定位，大div相对定位，定位到大盒子的宽高一半的位置，再上下各margin负的自己宽高的一半
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Title</title><style>
.father{
width: 600px;
height: 600px;
background-color: orangered;
position: relative;
}
.son{
width: 300px;
height: 200px;
background-color: lawngreen;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
}
</style></head><body><div><div></div></div></body>
</html>
显示结果如下：
扩展资料：
一个绝对定位的元素，如果父辈元素中出现了也定位了的元素，那么将以父辈这个元素，为参考点。工程上，“子绝父相”有意义，父亲元素没有脱标，儿子元素脱标在父亲元素的范围里面移动。
绝对定位之后，所有标准流的规则，都不适用了。所以margin:0 auto;失效。
display:inline和display:inline-block，会使margin:0 auto;失效。
固定宽度的盒子才能使用margin:0 auto;居中
实现原理是设置margin自动适应,然后设置定位的上下左右都为0。
就如四边均衡受力从而实现盒子的居中：
代码：
.parent {
width:800px;
height:500px;
border:2px solid #000;
display:table-cell;
vertical-align:middle;
text-align: center;
}
.child {
width:200px;
height:200px;
display:inline-block;
background-color: red;
}
扩展资料
div+css绝对定位
使用通常是父级定义position:relative定位
子级定义position:absolute绝对定位属性，并且子级使用left或right和top或bottom进行绝对定位。
.divcss5{position:relative} 定义，通常最好再定义CSS宽度和CSS高度
.divcss5-a{position:absolute;left:10px;top:10px} 这里定义了距离父级左侧距离间距为10px，距离父级上边距离为10px
参考资料
方法1：
width:800px;
height:500px;
border:2px solid #000;
position:relative;
}
.child {
width:200px;
height:200px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-color: red;
}
方法2：
width:800px;
height:500px;
border:2px solid #000;
display:table-cell;
vertical-align:middle;
text-align: center;
}
.child {
width:200px;
height:200px;
display:inline-block;
background-color: red;
}
方法3：
width:800px;
height:500px;
border:2px solid #000;
display:flex;
justify-content:center;
align-items:center;
}
.child {
width:200px;
height:200px;
background-color: red;
}
方法4：
width:800px;
height:500px;
border:2px solid #000;
position:relative;
}
.child {
width:300px;
height:200px;
margin:auto;
position:absolute;/*设定水平和垂直偏移父元素的50%，
再根据实际长度将子元素上左挪回一半大小*/
left:50%;
top:50%;
margin-left: -150px;
margin-top:-100px;
background-color: red;
}
小div在大div中居中可以设置合适的padding 或margin值，尺寸计算对了就好
当然如果尺寸不方便计算的话那就使用定位属性，小的div在大的div中分别绝对定位为：left：50%；top:50%,然后再添加margin-left\top属性，值为负的小div的宽高的一半~
简单代码如下：
<html><head>
<title>淘宝 2faner</title>
<style type="text/css">
.big{
width: 800px;
height: 500px;
background: #333;
position: relative;
}
.small{
width: 400px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left:-200px;
margin-top: -100px;
background: #fff;
}
</style>
</head>
<body>
<div class="big">
<div class="small">
</div>
</div>
</body>
</html>本回答被提问者和网友采纳
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style >
.a1{
width: 100px;
height: 100px;
background-color: red;
}
.a2{
margin: auto;
width: 50px;
height: 50px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="a1">q
<div class="a2">q</div>
</div>
</body>
</html>
使用 margin: auto;
div+css 怎么让一个小div在另一个大div里面 垂直居中
方法一、小div绝对定位或相对定位，这样小div脱离标准流，大div有固定宽高，用小div的margin去挤大div <!DOCTYPE html> <html><head><meta charset="UTF-8"><title>Title<\/title><style> .father{ width: 600px;height: 600px;background-color: orangered;} .son{ width: 300px;height: 200...
div+css 怎么让一个小div在另一个大div里面 垂直居中
transform：translate（-50%，-50%）；对小的div设置如上css样式就居中了
div+css 怎么让一个小div在另一个大div里面 垂直居中
小div在大div中居中可以设置合适的padding 或margin值，尺寸计算对了就好 当然如果尺寸不方便计算的话那就使用定位属性，小的div在大的div中分别绝对定位为：left：50%；top:50%,然后再添加margin-left\\top属性，值为负的小div的宽高的一半~
div+css如何实现水平垂直居中?
通过设置div元素的margin: auto属性，浏览器自动计算边距，使div元素在网格单元格内水平和垂直居中。结合display: grid，实现元素居中效果。使用 CSS Grid 网格区域居中 Div 借助网格布局的强大功能，通过指定div元素的网格区域，可以将其放置在具有多行多列的网格容器中心。利用grid-area属性定义区域位置，实...
让DIV垂直居中
让DIV垂直居中是网页设计经常用到的操作，让DIV垂直居中的方法如下：1、打开CSS，设置DIV的宽度和高度；2、设置对象样式的位置为绝对位置；3、将距离页面窗口左边框和上边框的距离设置为百分之五十；4、将该DIV分别左移和上移，左移和上移的大小是该DIV宽度和高度的一半；5、同时设置margintop和margin...
html的问题,怎么让一个DIV在另一个DIV中水平垂直居中?
html中让一个DIV在另一个DIV中水平垂直居中，可以通过将一个div包裹第二个div，然后在将设置第一个div的宽高，要比第二大上很多，然后在设置第二个的宽高，然后通过margin：auto auto；这里我提交代码:<html> <head> <title>文字测试<\/title> <style> test{ width:800px;height:400px;border:...
css 让div居中的几种方式
另一种方法是利用position: absolute;。将小div设为绝对定位，设置left和top为`auto`，可以让小div在大div中水平和垂直居中。具体可以分为两种情况：一是指定left和top的精确像素值，二是将left和top设置为百分比，使其相对于大div的尺寸进行居中。如果外部大div的宽度和高度固定，而小div的宽度和高度...
如何div中的div居中cssdiv中的div怎么居中
一个比较简单的方法就是这样：你们假设你的DIV是高度100PX，宽度是1000PX，那你这样写，你的文字就会水平垂直居中：水平垂直居中 CSS是这样的，text-align:center意思就是说，让这个DIV里的文字水平居中，而line-height:100px;的意思是说，让DIV里面的每一行文字，占的高度为100PX（和那个DIV的高度一...
cssdiv居中的三种方法
方法一：使用margin属性实现水平居中 对于单个div元素，可以通过设置左右margin为auto来实现水平居中。这种方法适用于宽度固定的div。例如，给div设置一个固定的宽度，然后将左右margin都设置为auto，浏览器会自动计算并均匀分配两侧空白，使div水平居中。方法二：利用flexbox布局实现灵活居中 Flexbox是CSS3中的...
如何让DIV里面的DIV水平垂直居中
方法一：让一个DIV水平居中，直接用CSS就可以做到。只要设置了DIV的宽度，然后使用margin设置边距0 auto，CSS自动算出左右边距，使得DIV居中。.mydiv{ margin:0 auto;width:300px;height:200px;} 方法二：要让DIV水平和垂直居中，必需知道该DIV得宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框...
