5种盒子垂直居中的方式

最新推荐文章于 2024-08-10 17:13:35 发布

李墨瞳

最新推荐文章于 2024-08-10 17:13:35 发布

阅读量4.9k

点赞数 3

分类专栏： css 文章标签： css 垂直居中 html

本文链接：https://blog.csdn.net/weixin_39921345/article/details/79892733

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.通过flex来实现：

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box{
			width: 800px;
			height: 800px;
			border: 1px solid #000;
			display: flex;
			/*控制元素在主轴的对齐方式*/
			justify-content: center;
			/*控制默认的一行的对齐方式*/
			align-items: center;
			margin: 0 auto;

		}
		.box1{
			text-align: center;
			width: 600px;
			height: 500px;
		}

	</style>
</head>
<body>
<div class="box">
	<div class="box1">
		慧及必伤，情深不寿。<br>
	<br>
	<br>
		慧及必伤，情深不寿。<br>
	<br>
	<br>
		慧及必伤，情深不寿。<br>
	<br>
	<br>
		慧及必伤，情深不寿。<br>
	<br>
	<br>
		慧及必伤，情深不寿。<br>
	<br>
	<br>
		慧及必伤，情深不寿。<br>
	<br>
	<br>
		慧及必伤，情深不寿。<br>
	<br>
	<br>
	</div>
</div>

2.通过用table来居中：

	<style>
		table{
			width: 800px;
			height: 500px;
			border: 1px solid #000;
		}
		td{
			/*控制行内块居中*/
			text-align: center;
		}
		/*div{*/
			/*依然可以不用写这个属性，inline-block，一样垂直居中*/
			/*行内元素不会继承父级的宽度
			/*display: inline-block;*/
		/*}*/

	</style>
</head>
<body>
	<table>
		<thead></thead>
			<tbody>
				<tr>
					<td>
						<div>
							玲珑骰子安红豆</br>
							入骨相思知不知</br>
							</br>
							</br>
							玲珑骰子安红豆</br>
							入骨相思知不知</br>
							</br>
							</br>
							玲珑骰子安红豆</br>
							入骨相思知不知</br>
							</br>
							</br>
							玲珑骰子安红豆</br>
							入骨相思知不知</br>
							</br>
							</br>
						</div>	

					</td>
				</tr>
		</tbody>
</table>
</body>

3.通过定位transform来实现：

<style>
	*{
		margin: 0;
		padding: 0;
	}
	.box{
		width: 800px;
		height: 400px;
		border: 1px solid #000;
		margin: 0 auto;
		position: relative;
	}
	.box1{
		text-align: center;
		width: 400px;
		height: 200px;
		position: absolute;
		overflow: hidden;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}

	</style>
</head>
<body>
	<div class="box">
		<div class="box1">
			陌上人如玉，公子世无双。<br>
			<br>
			<br>
			陌上人如玉，公子世无双。<br>
<br>
<br>
			陌上人如玉，公子世无双。<br>

			陌上人如玉，公子世无双。<br>
<br>
<br>
			陌上人如玉，公子世无双。<br>
			陌上人如玉，公子世无双。<br>
<br>
<br>
			陌上人如玉，公子世无双。<br>
<br>
<br>
	
		</div>
	</div>
</body>

4.通过行内块和vertical-align实现（这种方式必须要添加一个空标签）：

	<style>
		.box{
			width: 700px;
			height: 500px;
			border: 1px solid #000;
			text-align: center;
			margin: 0 auto;
		}
		.box1{
			vertical-align: middle;
			display: inline-block;
		}
		.tips{
			width: 1px;
			height: 100%;
			/*background-color: red;*/
			vertical-align: middle;
			display: inline-block;
		}

	</style>
</head>
<body>
	<div class="box">
		<div class="box1">
			入则恳恳以尽忠，出则谦谦以自悔。</br>
			<br>
			<br>
			入则恳恳以尽忠，出则谦谦以自悔。</br>
			<br>
			<br>
			入则恳恳以尽忠，出则谦谦以自悔。</br>
			<br>
			<br>
			入则恳恳以尽忠，出则谦谦以自悔。</br>
			<br>
			<br>
			入则恳恳以尽忠，出则谦谦以自悔。</br>
			<br>
			<br>
		</div>
<span class="tips"></span>
	</div>
</body>

5.通过table-cell来实现：

	<style>
	/*这样写的缺点在于，大盒子如果转成table-cell，那么这个盒子便设置不了margin了。*/
	.box{
		width: 800px;
		height: 500px;
		border: 1px solid #000;
		text-align: center;
		vertical-align: middle;
		display: table-cell;
	}
	/*这里的 inline-block 可以不用写，不会有任何问题*/
	/*.box1{
		display: inline-block;
		vertical-align: middle;
		
	}*/

	</style>
</head>
<body>
	<div class="box">
		<div class="box1">
	你喜欢的是细水长流煮红豆</br>
	我想要的是声色犬马走天涯</br>
		</br>
	</br>
	你喜欢的是细水长流煮红豆</br>
	我想要的是声色犬马走天涯</br>
		</br>
	</br>
	你喜欢的是细水长流煮红豆</br>
	我想要的是声色犬马走天涯</br>
		</br>
	</br>
	你喜欢的是细水长流煮红豆</br>
	我想要的是声色犬马走天涯</br>
		</br>
	</br>
	你喜欢的是细水长流煮红豆</br>
	我想要的是声色犬马走天涯</br>

	</div>
</div>
</body>

以上是用css实现垂直居中的5种方式；不举js的了，毕竟用js无非也是控制css