已知/未知宽高的浮动元素水平垂直居中对齐

最新推荐文章于 2022-02-26 20:21:21 发布

原创最新推荐文章于 2022-02-26 20:21:21 发布 · 635 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #水平垂直居中对齐 #图片水平垂直居中对齐

CSS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了三种不同场景下的元素居中方法：已知宽高的浮动元素、未知宽高的浮动元素及图片的水平垂直居中。每种方法都提供了详细的CSS样式代码及HTML模板。

一、已知宽高的浮动元素水平垂直居中对齐

效果：

样式CSS:

 <style>
	.parent{
		position:relative;
		border:2px solid #0f0;
	}
	.child{
		float:left;
		background-color:#6699ff;
		width:200px;
		height:200px;
		border:2px solid #f00;
		position:absolute;
		top:50%;
		left:50%;
		margin-top:-100px;
		margin-left:-100px;
	}
 </style>

模板HTML:

<body>
		<div class="parent">
			<div class="child"></div>
		</div>
 </body>

二、未知宽高的浮动元素水平垂直居中对齐

效果：

样式CSS：

<style>
	.parent{
		position:relative;
		border:2px solid #0f0;
	}

	.child{
		float:left;
		background-color:#6699ff;
		width:260px;//元素宽高随便设定
		height:260px;
		border:2px solid #f00;

		margin:auto;
		position:absolute;
		top:0;
		left:0;
		bottom:0;
		right:0;
	}
 </style>

模板HTML：

<body>
		<div class="parent">
			<div class="child"></div>
		</div>
 </body>

三、图片的水平垂直居中

效果：

样式CSS:

 <style>
		.container{
			display:table-cell;
			text-align:center;
			vertical-align:middle;
			width:500px;
			height:300px;
			border:2px solid #f00;
		}

		img{
			width:200px;
			height:200px;
			border:2px solid #0f0;
		}

  </style>

模板HTML:

 <div class="container">
	<img src="watermelon.jpg" alt="">
 </div>