猿问

盒子怎么没垂直居中呢？把margin-top改成具体数值有效，但是50%就不行，为什么？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div style="background-color: black;overflow: hidden">
    <div style="width: 50%;background-color: blue;float: left;margin-top: 50%;transform: translate(-50%)">
        <p>怎么让我居中</p>
    </div>
    <div style="width: 50%; float: left">
        <div style="width: 100px;height: 400px;background-color: red;"></div>
    </div>
</div>
</body>
</html>


		

			
慕粉3782079

			
浏览 2051回答 1

		

	

	

									
	

	

		
1回答

		

			
			

				
				
其实我真的不是东北人

				
满意请采纳。<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        * {            margin:0;            padding:0;        }        #div {            transform:translate(-50%,-50%);        }    </style></head><body><div style="background-color: black;overflow: hidden">    <div style="width: 50%;background-color: blue;float: left;margin-top: 50%;transform: translate(-50%)">        <p>怎么让我居中</p>    </div>    <div style="width: 50%; float: left">        <div style="width: 100px;height: 400px;background-color: red;" id="div"></div>    </div></div></body></html>

				

					

            
            
          

          
1

				

			

			
		

	

	

		随时随地看视频慕课网APP
	

	
	

		
相关问题

		

		
			
为什么字体颜色在Eclipse上没有变化  2 回答

		
		

	

	
	
	

		
相关分类

		

			
			

			
				 Bootstrap
			
			

				
			
			

			
				 Html/CSS
			
			

				
					
					
为什么字体颜色在Eclipse上没有变化  2 回答

					
				
			
			

			
				 Html5
			
			

				
			
		

	

	
	
	

		我要回答