关于css中两层div的水平垂直居中问题

最新推荐文章于 2023-11-03 20:38:10 发布

liujianhuan0622

最新推荐文章于 2023-11-03 20:38:10 发布

阅读量1.6k

点赞数

分类专栏： web前端开发文章标签： javascript css 布局 div水平垂直居中

本文链接：https://blog.csdn.net/liujianhuan0622/article/details/46493809

版权

web前端开发专栏收录该内容

14 篇文章 0 订阅

订阅专栏

前段时间一直在忙于实验室的项目没有专门的时间来更新，差点觉得自己就要就此放弃了。今天下午忙了一段时间后突然想起来了上次面试快的打车时候的一个题目，当时也算是浑浑噩噩没有说清楚，所以今天想专门拿出来写一写，也不用最新的css3技术，就使用传统的布局来进行实现。

问题描述：两个div，父子关系，父元素固定宽高时候如何使子元素水平垂直居中？父元素宽高不固定的时候如何使子元素水平垂直居中？也就是使下图的小方块水平垂直居中。

下面就开始一步一步的解决掉这个问题。其实对于布局来讲，如果仅仅是实现水平居中的话，那是相当容易的，不废话，直接上代码。

<!DOCTYPE html>
<html>
<head>
	<title></title>
<style type="text/css">
body{
	margin: 100px;
}
#inner{
	width: 100px;
	height: 100px;
	background-color: #ccc;
	margin:0 auto;
}
#outer{
	width: 200px;
	height: 400px;
	background-color: #333;
}
</style>
</head>
<body>

<div id="outer">
	<div id="inner"></div>
</div>

</body>
</html>

要点就在于图中的这一行：margin:0 auto;设置上下外边距为0，左右外边距为auto。但是对于垂直居中的话就不可行啦，所以此法是行不通的。

我们也很清楚，水平垂直居中也就是将子元素放在固定宽高的父元素的中间，那么最笨的办法也是最容易想到的办法就必然呼之而出了，那种万能的top和left了，但是在使用前我们还得考虑一下，是相对于页面来偏移呢还是相对于父元素来偏移呢，其实这是句废话，必然是相对于父元素进行偏移，所以只需要在父元素上添加position:relative, 子元素上添加position:absolute,然后进行top和left吧，必然能到达指定位置的，再次上图。

<!DOCTYPE html>
<html>
<head>
	<title></title>
<style type="text/css">
body{
	margin: 100px;
}
#inner{
	width: 100px;
	height: 100px;
	background-color: #ccc;
	position: absolute;
	top:200px;

	left:200px;
}
#outer{
	position: relative;
	width: 500px;
	height: 500px;
	background-color: #333;
}
</style>
</head>
<body>

<div id="outer">
	<div id="inner"></div>
</div>

</body>
</html>

在此打算继续啰嗦一下absolute和relative的用法，relative定位是根据其本应该出现的位置就行偏移定位，使用relative后元素相对于本该出现的位置进行偏移，但是不会脱离文档流，原来的位置仍然是保留在原处的。absolute定位则是根据其最近的已定位的父级元素进行定位，重点指出是已定位的父级元素，即父级元素添加了position属性，但是此时元素已经脱离文档流，也不再占有其原来的位置了。不晓得说清楚了没有，不清楚的话可以w3cschool了或者百度了。

好了，转过来接着居中问题继续开展，上述最容易的方法也只能针对父元素固定宽高的情况下适用，如果父元素的宽高不固定的话如何进行偏移呢？在此先再贴上图片吧。

从图中可以看出居中的示意图，其实就是父元素和子元素对折在一条线上嘛，但是子元素偏移多少才能达到中间呢？简单一看就知道，就是偏移父元素宽度的一半减去子元素宽度的一半，看到这两个“一半”我想已经差不多了，就是使用百分比来进行偏移，使用百分比的话就完全不需要知道父元素的宽高了呀，其实我们可以再次转换一下，既然是偏移父元素宽度的一半减去子元素宽度的一半，那么就可以先把子元素的一半偏移到父元素外，然后再偏移父元素的一半。其实到这里我也被自己的一半一半的说糊涂了，直接上图。

上图以后就立刻清楚明白了，子元素的一半偏移到父元素外就得使用负外边距了，margin-left设置为子元素的一半。垂直方向的居中相类似，只是换到了另一个方向上，所以此种方法的最终代码就是

<!DOCTYPE html>
<html>
<head>
	<title></title>
<style type="text/css">
body{
	margin: 100px;
}
#inner{
	width: 100px;
	height: 100px;
	background-color: #ccc;
	position: absolute;
	margin-left:-50px;

	margin-top:-50px;

	top:50%;

	left:50%;
}
#outer{
	position: relative;
	width: 200px;
	height: 400px;
	background-color: #333;
}
</style>
</head>
<body>

<div id="outer">
	<div id="inner"></div>
</div>

</body>
</html>

再上两幅不同宽高时候的效果图如下：

到此处，最上面的面试问题已经完全解决了啊，在固定宽高时候和不固定宽高时候都可以实现子元素的水平垂直居中了，其实最后一处我们走了弯路，就是那个一半又一半的地方，如果清楚css里边的calc()方法的话，就可以直接写了，没必要拐弯抹角的来回偏移了，直接上代码。

<!DOCTYPE html>
<html>
<head>
	<title></title>
<style type="text/css">
body{
	margin: 100px;
}
#inner{
	width: 100px;
	height: 100px;
	background-color: #ccc;
	position: absolute;
	top:calc(50% - 50px);
	left:calc(50% - 50px);
}
#outer{
	position: relative;
	width: 200px;
	height: 400px;
	background-color: #333;
}
</style>
</head>
<body>

<div id="outer">
	<div id="inner"></div>
</div>

</body>
</html>

好了，到此为止啦。今天的内容纯属原创，无须添加参考地址之类的玩意儿啦。

liujianhuan0622

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于css中两层div的水平垂直居中问题

前段时间一直在忙于实验室的项目没有专门的时间来更新公众号，差点觉得自己就要就此放弃了。今天下午忙了一段时间后突然想起来了上次面试快的打车时候的一个题目，当时也算是浑浑噩噩没有说清楚，所以今天想专门拿出来写一写，也不用最新的css3技术，就使用传统的布局来进行实现。问题描述：两个div，父子关系，父元素固定宽高时候如何使子元素水平垂直居中？父元素宽高不固定的时候如何使子元素水平垂直居中？也
复制链接

扫一扫