面试题（三）DIV水平居中

最新推荐文章于 2021-05-25 14:33:00 发布

草莓冻冻

最新推荐文章于 2021-05-25 14:33:00 发布

阅读量367

点赞数

分类专栏：面试

本文链接：https://blog.csdn.net/tyoubinn/article/details/109147949

版权

面试专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS布局中使div水平居中的六种方法，包括绝对定位结合transform、设置负margin、全边距0、flex布局、table-cell以及calc()函数的应用，覆盖了不同场景下的解决方案。

摘要由CSDN通过智能技术生成

方法一

绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;）

<style>
	.container{
		position: relative;
	}
	.inner{
		position:absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50% -50%);
	}
</style>
<div class="container">
<div class="inner"></div>
</div>

方法二

绝对定位方法：确定了当前div的宽度，margin值为当前div宽度一半的负值

<style>
	.container{
		position: relative;
	}
	.inner{
		width: 600px;
		height: 600px;
		position:absolute;
		left: 50%;
		top: 50%;
		margin-left: -300px;
		margin-top: -300px;
	}
</style>
<div class="container">
<div class="inner"></div>
</div>

方法三

绝对定位方法：绝对定位下top left right bottom 都设置0

<style>
	.container{
		position: relative;
	}
	.inner{
		width: 600px;
		height: 600px;
		position:absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		margin: auto;
	}
</style>
<div class="container">
<div class="inner"></div>
</div>

优点：宽高可以不设置

方法四

flex布局方法：当前div的父级添加flex css样式

<style>
	.container{
		height:800px;
    	-webkit-display:flex;
    	display:flex;
    	-webkit-align-items:center;
    	align-items:center; /*交叉轴方向居中-垂直居中*/
    	-webkit-justify-content:center; /*主轴方向居中-水平居中*/
    	justify-content:center;
	}
	.inner{
    	width:600px;
    	height:600px;
	}
</style>
<div class="container">
<div class="inner"></div>
</div>

方法五

table-cell实现水平垂直居中: table-cell middle center组合使用

<style>
	.container{
		display: table-cell;
    	vertical-align: middle;
    	text-align: center;
   	 	width: 240px;
    	height: 180px;
	}
	.inner{
    	position: absolute;
  		width: 200px;
  		height: 50px;
  		left:-webkit-calc((400px - 200px)/2);
  		top:-webkit-calc((160px - 50px)/2);
  		left:-moz-calc((400px - 200px)/2);
  		top:-moz-calc((160px - 50px)/2);
  		left:calc((400px - 200px)/2);
  		top:calc((160px - 50px)/2);
	}
</style>
<div class="container">
<div class="inner"></div>
</div>

方法六

绝对定位：calc() 函数动态计算实现水平垂直居中

<style>
	.container{
		position: relative;
  		border: 1px solid #ccc;
  		width: 400px;
  		height: 160px;
	}
</style>
<div class="container">
<div class="inner"></div>
</div>