CSS实现盒子垂直居中

2021-05-01 11:30:28 阅读：178 来源： 互联网

标签：居中盒子 solid 100px height width 1px border CSS

每天一个前端面试题之 CSS实现盒子的垂直居中

一，flex布局（不需要知道子元素的宽高）

主要是给父元素进行相应的设置

        #father{
	    	display: flex;
	    	justify-content: center;
	    	align-items: center;

	    	width: 500px;
	    	height: 500px;
	    	border: 1px solid black;
	    }
	    #son{
	    	width: 100px;
	    	height: 100px;
	    	border: 1px solid red;
	    }

在这里插入图片描述

二、定位和margin（需知道子元素的宽高）

       #father{
	    	position: relative;

	    	width: 500px;
	    	height: 500px;
	    	border: 1px solid black;
	    }
	    #son{
	    	position: absolute;
	    	top: 50%;
	    	left: 50%;
	    	margin-left: -50px;
	    	margin-top: -50px;
	    	
	    	width: 100px;
	    	height: 100px;
	    	border: 1px solid red;
	    }

三、定位和margin（不需要知道子元素的宽高）

        #father{
	    	position: relative;

	    	width: 500px;
	    	height: 500px;
	    	border: 1px solid black;
	    }
	    #son{
	    	position: absolute;
	    	top: 0;
	    	right: 0;
	    	bottom: 0;
	    	left: 0;
	    	margin: auto;

	    	width: 100px;
	    	height: 100px;
	    	border: 1px solid red;
	    }

四、定位和transform（不需要知道子元素的宽高）

        #father{
	    	position: relative;

	    	width: 500px;
	    	height: 500px;
	    	border: 1px solid black;
	    }
	    #son{
	    	position: absolute;
	    	top: 50%;
	    	left: 50%;
	    	transform: translate(-50%,-50%);
	    	
	    	width: 100px;
	    	height: 100px;
	    	border: 1px solid red;
	    }

五、display: table-cell（不需要知道子元素的宽高）

	    #father{
	    	display: table-cell;
	    	text-align: center;
	    	vertical-align: middle;

	    	width: 500px;
	    	height: 500px;
	    	border: 1px solid black;
	    }
	    #son{
	    	display: inline-block;

	    	width: 100px;
	    	height: 100px;
	    	border: 1px solid red;
	    }

六、grid布局（不需要知道子元素的宽高）

	    #father{
	    	display: grid;

	    	width: 500px;
	    	height: 500px;
	    	border: 1px solid black;
	    }
	    #son{
            align-self: center;
            justify-self: center;

	    	width: 100px;
	    	height: 100px;
	    	border: 1px solid red;
	    }

标签：居中,盒子,solid,100px,height,width,1px,border,CSS
来源： https://blog.csdn.net/weixin_44023123/article/details/116326204

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9