为什么HTML定位不能垂直居中？？？？？？

老梁啊 2018-11-18 07:08:51

代码如下，，谢谢大佬们
</html>

<!DOCTYPE html>

<html>

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

	*{

		margin: 0;

		padding: 0;

	}

	div{

		width: 200px;

		height: 200px;

		background-color: #f00;

		position: relative;

		left: 50%;

		margin-left: -150px;

		top: 50%;

		margin-top: -150px;

	}

	</style>

</head>

<body>

	<div></div>

</body>

...全文

135 5 打赏收藏转发到动态举报

写回复

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

老梁啊 2018-11-18

打赏
举报

回复

引用 4 楼 jslang 的回复:

因为 body 的 height 默认值是 auto;
所以div的 top: 50%; 就无效了。

谢谢老哥

天际的海浪 2018-11-18

打赏
举报

回复

因为 body 的 height 默认值是 auto; 所以div的 top: 50%; 就无效了。

老梁啊 2018-11-18

打赏
举报

回复

引用 2 楼 jslang 的回复:

加上 html,body {height: 100%;}

为什么啊？能不能解释下啊，老哥？

天际的海浪 2018-11-18

打赏
举报

回复

加上 html,body {height: 100%;}

老梁啊 2018-11-18

打赏
举报

回复

一楼自己坐

针对学员疑问“div垂直居中？”引出的“CSS元素垂直居中一系列方法的探究”的针对性课程，课程包含两方面：1、文本垂直居中的解决方案；2、块级元素垂直居中的解决方案。

还有一种方法是使用绝对定位和transform属性来实现垂直居中。这些是在HTML中实现垂直居中的几种常用方法。你可以根据具体的需求和布局选择合适的方法来实现垂直居中效果。另一种常用的方法是使用表格布局来实现垂直...

我们经常用margin:0 auto来实现水平居中，而一直认为margin:auto不能实现垂直居中……实际上，实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { margin: auto; position: absolute; top: 0; left...

做前端开发的同学肯定对文本居中不陌生，但一般我们说的都是水平居中也就是左右居中，那么你想过没有如何实现垂直居中也就是上下居中吗？今天小千就来给大家介绍一下。单行文字垂直居中—行高等于高度值上面的...

对于刚刚css入门的新手可能还不是很熟悉，下面我们来总结一下css如何让img垂直居中？一、使用flex实现垂直居中利用 display: flex;align-items: center 实现垂直居中。flex可能不是实现垂直居中最好的选择，因为IE8,...

61,111

社区成员

60,734

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章