四时宝库

程序员的知识宝库

CSS 实现垂直水平居中(css 水平居中 垂直居中 水平垂直居中)

以下是小朋友给我提的问题和我的答案:

问:CSS如何实现垂直水平居中

答 : 实现方法有很多种,以下是其中一种实现:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
		.wrapper {
			position: relative;
			width: 500px;
			height: 500px;
			border: 1px solid red; 
		 }
		.content{
			position: absolute;
			width: 200px;
			height: 200px;
			/*top、bottom、left和right 均设置为0*/
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			/*margin设置为auto*/
			margin:auto;
			border: 1px solid green; 
		} 
	</style>
</head>
<body>
	<div class="wrapper">
		 <div class="content"></div>
	</div>
</body>
</html>

代码简单,自己理解,或者复制到一个文件里面尝试一下。

问:px和em的区别

答:px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小。

浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

这个并不是绝对的,一般手机类的自适应界面都会用em作为单位,px主要用来做电脑客户端的界面

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接