html中元素垂直居中的方法

最新推荐文章于 2024-03-13 09:18:33 发布

coder-quan

最新推荐文章于 2024-03-13 09:18:33 发布

阅读量818

点赞数

本文链接：https://blog.csdn.net/quan44444/article/details/119655195

版权

一、margin:auto 法 css:

<style>
	.container{
		width: 400px;
		height: 400px;
		position: relative;
		border: 1px solid #pink;
	}
	span{
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
</style>
<body>
	<div class='container'><span></span></div>
</body>
//定位为上下左右为0，margin：0 可以实现脱离文档流的居中.

二、margin 负值法

<style>
	.container{
		width: 500px;
		height: 400px;
		border: 1px solid #pink;
		position: relative;
	}
	span{
		width: 480px;
		height: 380px;
		background-color: #blue;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -190px; /*向上移动height 的一半*/
		margin-left: -240px; /*向左移动width 的一半*/
	}
</style>
<body>
	<div class='container'><span>Flex</span></div>
</body>

//PS：子元素可以将marin-top 和margin-left 负值替换成
transform：translateX(-50%)和transform：translateY(-50%)

三、table-cell（未脱离文档流的）

设置父元素的display:table-cell,并且vertical-align:middle，子元素即可垂直居中。

<style>
	.container{
		width: 300px;
		height: 300px;
		border: 1px solid pink;
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}
	span{
		vertical-align: middle;
	}
</style>
<body>
	<div class='container'><span>Flex</span></div>
</body>

五、将父元素设置为display:flex;align-items:center;justify-content:center（具体参考flex布局详解）

<style>
	.container {
		width: 300px;
		height: 200px;
		border: 1px solid #pink;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	span {
		border: 1px solid blue;
		padding: 20px;
	}
</style>
<body>
	<div class='container'><span>Flex</span></div>
</body>

coder-quan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html中元素垂直居中的方法

一、margin:auto 法 css:<style> .container{ width: 400px; height: 400px; position: relative; border: 1px solid #pink; } span{ position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; }</style><body>
复制链接

扫一扫