居中的几种方式

最新推荐文章于 2020-12-19 15:40:29 发布

贵哥的编程之路(热爱分享)

最新推荐文章于 2020-12-19 15:40:29 发布

阅读量1k

点赞数 1

分类专栏：手机端大全解决

本文链接：https://blog.csdn.net/qq_37805832/article/details/109324769

版权

手机端大全解决专栏收录该内容

9 篇文章 0 订阅

订阅专栏

第一种：

<!doctype html> 
<html> 
<head> 
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">
*{margin: 0;padding: 0;}
div{width: 100px;height: 100px;background: black;
	position: absolute;left: 50%;top: 50%;
	transform:translate(-50%,-50%);
}


    </style>
</head>

<body>
<div></div>

</body>
</html>

第二种：

<!doctype html> 
<html> 
<head> 
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">
*{margin: 0;padding: 0;}
div{width: 100px;height: 100px;background: black;
	position: absolute;left: 50%;top: 50%;margin: -50px 0 0 -50px;
}


    </style>
</head>

<body>
<div></div>

</body>
</html>

第三种：

<!doctype html> 
<html> 
<head> 
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">
*{margin: 0;padding: 0;}
body,html{height: 100%;}

div{width: 100px;height: 100px;background: black;
	position: fixed;
	left: 50%;top: 50%;
	margin-top: -50px;
	margin-left: -50px;
}


    </style>
</head>

<body>
<div></div>

</body>
</html>

注意一下，为什么是margin呢？
因为padding是自身的扩大,margin是距离.left top bottom right

贵哥的编程之路(热爱分享)

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
居中的几种方式

第一种：<!doctype html> <html> <head> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta charset="utf-8"> <title></title> <style type=
复制链接

扫一扫