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

最新推荐文章于 2022-04-26 15:41:10 发布

花洲郎

最新推荐文章于 2022-04-26 15:41:10 发布

阅读量550

点赞数 1

分类专栏： CSS 文章标签： css 水平垂直居中对齐图片水平垂直居中对齐

本文链接：https://blog.csdn.net/SunYu_Web/article/details/77142089

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

效果：

样式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>

花洲郎

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
已知/未知宽高的浮动元素水平垂直居中对齐

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

扫一扫

专栏目录

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

“相关推荐”对你有帮助么？