css3元素水平垂直居中的几种方式

时间：5年前阅读：5852

第一种：

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			*{    
				padding: 0;    
				margin: 0;    
			}    
			.dd{    
				width: 400px;    
				height: 300px;    
				background: darkcyan;    
				/*第一种水平垂直居中的方法*/    
				position: fixed;    
				left: 50%;    
				top: 50%;    
				margin-left:-200px;    
				margin-top: -130px;    
			}    
		</style>    
	</head>    
	<body>    
		<div class="dd"></div>    
	</body>    
</html>

第二种：

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			*{    
				padding: 0;    
				margin: 0;    
			}    
			.dd{    
				width: 400px;    
				position: fixed;    
				background: darkcyan;    
				/*如果元素没有固定的宽高*/    
				left: 50%;    
				top: 50%;    
				transform: translate(-50%,-50%);  /*translate 元素水平垂直*/    
			}    
		</style>    
	</head>    
	<body>    
		<div class="dd">李盈莹作为奇兵用可以，但作为中坚尚有距离，主要是稳定性差，关键战役失一个球就是1分，所以中美之战还没让之首发。而昨天首发的几个人几乎完美，丁霞的二传发挥到了极至，昨天一传不到位时大调整攻，中国的比美国下球还好，这朱婷最大的突破。</div>    
	</body>    
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

css3元素水平垂直居中的几种方式

网友评论