设置div垂直居中（如何让div中的内容垂直水平居中）

：暂无数据 2026-09-26 09:30:12 ：1

其实设置div垂直居中的问题并不复杂，但是又很多的朋友都不太了解如何让div中的内容垂直水平居中，因此呢，今天小编就来为大家分享设置div垂直居中的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！

本文目录

如何让div中的内容垂直水平居中
div怎么垂直并居中排列，求大神
如何设置一个div中的文字水平垂直居中

如何让div中的内容垂直水平居中

div实现水平居中只需要设置固定宽度和margin:0 auto即可，
给你2个解决方案:
1、条件是div的高度和宽度是固定的
《style type="text/css"》
《!--
div1 {
position:relative;
width:600px;
height:500px;
border:1px solid #008800;
}
div2 {
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -200px;
width:400px;
height:300px;
border:1px solid #008800;
}--》
《/style》
《div class="div1"》
《div class="div2"》让层垂直居中《/div》
《/div》
其实解决的思路是这样的：首们需要position:absolute;绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。
如：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现了层垂直居中于父级层的样式编写。
2、条件是div的高度和宽度是不固定的
如果div宽度不固定，那用div就有点困难了，虽然用js获取当前高宽再附加css可以解决，但是要用到js来解决问题就有点逊了；
我给你一个思路，你不妨试试table布局，table不设置宽度的情况下默认是宽度和高度都是最小化的，这样给table设置margin:0 auto就可以让这个table水平方向居中；
解决了水平居中，那就来解决垂直居中，td中的内容默认是垂直居中的，那么只要两者互相嵌套一下不就解决水平垂直居中了!
但是有一个问题，你所需要垂直居中的父级table的高度是否固定，如果父级高度固定，那么子级高度不固定也一样可以垂直居中

div怎么垂直并居中排列，求大神

如果只是解决水平居中的话，那用margin:0 auto或者父级设置padding值都可以达到效果，但是要达到垂直居中，那就有点麻烦，你可以考虑用table布局达到效果，因为td默认是垂直居中的，下面就给你写个例子好了
《body style="margin:0; padding:0; height:100%;"》
《table border="0" cellpadding="0" cellspacing="0" width="500" style="margin:0 auto; border:1px solid red;"》
《tr》
《td style="height:600px;"》
《div style="width:300px; height:100px; background:red;margin:0 auto;"》《/div》
《div style="width:300px; height:100px; background:black;margin:0 auto;"》《/div》
《div style="width:300px; height:100px; background:green;margin:0 auto;"》《/div》
《/td》
《/tr》
《/table》
《/body》
如果不想用table布局，那就用另外一个方法好了
《body style="margin:0; padding:0; height:100%;"》
《div style="width:600px; height:600px; border:1px solid red; margin:0 auto; position:relative"》
《div style="height:300px; width:400px; position:absolute; left:50%; top:50%; margin-left:-200px; margin-top:-150px;"》
《div style="height:100px; background:red;"》《/div》
《div style="height:100px; background:black;"》《/div》
《div style="height:100px; background:green;"》《/div》
《/div》
《/div》
《/body》
这个方法不好的地方就是必须固定高度，不太适合调整