纯css解决position:abusolute的div居中显示

最新推荐文章于 2024-04-02 14:52:40 发布

hs12341234

最新推荐文章于 2024-04-02 14:52:40 发布

阅读量971

点赞数

分类专栏：我的css成长之路文章标签： absolute css 居中

本文链接：https://blog.csdn.net/hs12341234/article/details/47148653

版权

我的css成长之路专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">记得有一次去小米面试。当时面试官问我，假如已知一个div高300px，宽500px，怎么让它显示在屏幕的正中。（同时左右，垂直居中）今天把这问题写下来，帮助那些遇到同样问题的人。</span>

方法一：

代码如下所示：假如div元素的父元素已经确定位置。此处我的父元素为body。当然也可以是其他的div元素之类的块元素。

<body> 
	<div></div>
</body>

以下是控制div居中的css。是的你没看错，方法就是用margin实现的。

html,body{
	width:100%;
	height:100%;
}
div{
	position:absolute;
	width:500px;
	height:300px;
	left:50%;
	top:50%;
	margin-left:-250px;
	margin-top:-150px;
	border:1px solid #000;
	
}

方法二：

以下代码中，父元素是一个div元素。

<div id="container">
	<div class="child"></div>
</div>

对应的css为：

#container{
	height:800px;
	width:800px;
	border:1px solid #000;
	position:relative;
}
.child{
	width:500px;
	height:300px;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin: auto;
	border:1px solid #000;
}

方法三：

同样，父元素为div元素。

<div id="container">
	<div class="child"></div>
</div>

对应的css为：

#container{
	height:800px;
	width:800px;
	border:1px solid #000;
	position:relative;
}
.child{
	width:500px;
	height:300px;
	position:absolute;
	top: 50%;
	left: 50%;
	transform:translate(-50%,-50%);
	border:1px solid #000;
}

非常简单，以后再也不用怕position为absolute的时候没有办法在父元素中居中了。。。。