您现在的位置是: 首页 » 网页代码 » CSS如何使元素浮动到屏幕中心?
网页代码

CSS如何使元素浮动到屏幕中心?

网站优化小编十一月 10, 2019 9人已围观

CSS float属性用于设置元素的水平对齐方式。但此属性允许元素仅在父主体的右侧或左侧浮动,其余元素围绕它;没有办法在CSS布局中让元素浮动到中心。下面本篇文章就来给大家介绍一下使用CSS使元素浮动到中心的方法,希望对大家有所帮助。

网站运营中栏目排名优化技巧

想要使用CSS使元素浮动到中心,可以使用position属性来居中元素。下面通过示例来给大家介绍一下。

示例:将浮动元素的位置精确地设置在屏幕的中心

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使浮动到元素的中心</title>
		<style> 
	        .center { 
	            width:200px; 
	            height:200px; 
	            position: fixed; 
	            background-color: palevioletred; 
	            top: 50%; 
	            left: 50%; 
	            margin-top: -100px; 
	            margin-left: -100px; 
	        }
	    </style>
	</head>

	<body>
		<div class="center"></div> 
	</body>

</html>

position属性用于指定元素的定位类型,而fixed属性值用于设置绝对定位的元素,相对于浏览器窗口进行定位;该元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

效果图:

网站运营中栏目排名优化技巧

相关文章

文章评论

    发表评论

    电子邮件地址不会被公开。

站点信息
  • 站点运行:202天
  • 网站程序:Wordpress
  • 主题模板:bvseo
  • 文章统计:2595 条
  • 文章评论:5 条
  • 微信公众号:扫描二维码,关注我们