jquery 多个div垂直居中

发布网友发布时间：2022-04-06 11:48

共2个回答

懂视网时间：2022-04-06 16:10

本篇文章给大家带来的内容是关于多个div垂直居中横向排列（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

父级p，子级p高度都为自适应。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>垂直居中</title>
	<style>
		#mine {
			width: 500px;
			height:500px;
			background: #f00;
			margin: 0 auto;
			display: flex;
		}
		.center {
			/*flex: 1;*/
			/*width: 100px;
			height: 100px;*/
			background: #0f0;
			margin:auto;
		}
	</style>
</head>
<body>
	<p id="mine">
		<p class="center">一</p>
		<p class="center">二</p>
		<p class="center">三</p>
	</p>
</body>
</html>

热心网友时间：2022-04-06 13:18

　　父级div没有高度，子级也没有高度，这样无法去居中显示，如果父级有高度，子级没有高度，那么可以有好几种方法，这里写两种，
　　第一种；定位做法，父级position:relative; 子级：position:absolute; 然后top：50%; margin-top:这里的值是当前div（也就是子级）高度的一般，为负值；比如子级高度20，那么这个margin-top：就是-10px；水平居中同理；
　　第二种；内边距或者外边距，内边距，也就是父级内边距那么也就是和定位原理差不多，垂直居中父级内边距css是：padding-top：（父级高度-子级高度）/2，然后父级高度是：height：height-padding-top；这里意思是父级高度要减去padding-top的高度才是父级的实际高度；外边距是用子级外边距去算，基本同理；
　　如果你父级高度没有定义，子级高度也不固定，那么这样的话父级高度是自己高度撑出来的，那么你要居中也可以是：子级css；margin：20px auto；这样写的话就是自己离父级上下20像素，左右自动，也就是水平居中了；
　　居中方法很多，具体要看你实际的用法和写法。追问可以用JQUERY解决么？看我补充的问题！~

追答

这样的，你这三个父级对是一个class你这样写所有获取的高度都是最好一个div 的高度，你要分开写，要先循环 .main 的div，然后获取每个div下子级的div的高度才能算出来。

$(".main").each(function () {
            var heightnum = $(this).outerHeight();
            var boxheight = $(this).find(".child").outerHeight();
            var allheight = (heightnum - boxheight) / 2;
            $(this).find(".child").css({ "position": "absolute", "top": allheight + "px", "display": "block" });
        });

试试看