如何让一个浮动垂直居中：两种方式！带来效果~~~~~~

。。。。在日常代码中，如何让一个浮动元素垂直居中呢？

两种方式：

　　1.未知元素的宽高======　　

　　2.已知元素宽高======

首先我们用第一种方式来演示：代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			position: absolute;
			margin:auto;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 400px;
			height: 400px;
			background-color: red;

		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

 效果如下：

其次我们使用第二种方式：代码如下

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         div{
 8             position: absolute;
 9             top: 50%;
10             left: 50%;
11             margin-top: -200px;
12             margin-left: -200px;
13             width: 400px;
14             height: 400px;
15             background-color: blue;
16 
17         }
18     </style>
19 </head>
20 <body>
21     <div></div>
22 </body>
23 </html>

效果如下：

 

 

 

以上两种方式均可实现浮动元素的居中；

 

注：值得注意的是，以上方式元素的父元素要相对定位； 对于已知宽高的元素 ：只需要top 和left 方向上 各给50%；  然后使用margin-top：元素高的一半（负值）；

margin-left：元素宽的一半（负值）；

 

posted @ 2018-10-22 20:30  yaogengzhu  阅读(3574)  评论(0)    收藏  举报