高度不固定的容器的上下左右的居中显示。(重点是垂直居中)

最新推荐文章于 2024-07-26 23:28:40 发布

怒放的生命1991

最新推荐文章于 2024-07-26 23:28:40 发布

阅读量459

点赞数

分类专栏：前端面试题css

本文链接：https://blog.csdn.net/qq_34507902/article/details/104334064

版权

前端同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

面试题css

1 篇文章 0 订阅

订阅专栏

基本上常用的就这四种：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	   
	    /*方法一：1）将父级容器设置为：*/
	  .gao{
	/*	display:table-cell;
		vertical-align:middle;
		text-align:center;
		width:100px;	
		height:100px;
		background: #ddd;
	  }	  */
	  /*方法二：2)使用flex*/
	 /* .gao{
		display: flex;
		justify-content: center;
		align-items: center;
		width:100px;	
		height:100px;
		background: #ddd;
	  }	*/
	  /*方法三：*/
	/*  .test{
	  	position: absolute;
	  	left:50%;
	  	top:50%;
	  	margin-left:-50px;
	  	margin-top:-50px;
	  	width:100px;
	  	height:100px;
	  	border: 1px solid #aaa;
	  }*/
	  /*方法四：*/
	  /*.test{
	  	position: absolute;
	  	left:50%;
	  	top:50%;
	  	width:100px;	
		height:100px;
		background: #ddd;
		transform: translateY(-50%) translateX(-50%);
	  }*/
	</style>
</head>
<body>
 <div class="gao">
 	<div class="test">dsfdsf</div>
 </div>
</body>
</html>