如何让div居中显示

文章2017-08-222,738 人已阅来源:TONJAY-原创

昨天逛博客看到还有些同学对如何让一个模块(div)相对于父级上下左右都居中显示所有疑问,那么在这里小小总结一下我常用的模块(div)居中方法。

首先咱们假设基础html结构为:

.main{ width: 200px; height: 200px; background: #3B8DBD;}
.sub{ width: 100px; height: 100px; background: #fff;}

让div居中显示第1种方法

利用定位position来实现,加上margin就可以实现,这个就比较简单了,重点是理解margin值的负值。缺点是div.sub必须有一个固定宽高。

直接看demo

运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tonjay</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
<style>
.main{ width: 200px; height: 200px; background: #3B8DBD; position: relative;}
.sub{ width: 100px; height: 100px; background: #fff; position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -50px;}
</style>
<div class="main">
    <div class="sub"></div>
</div>
</body>
</html>

让div居中显示第2种方法

如果想要很好的兼容性,但是div.sub也不能固定宽高,应该只需要js来实现了,这里我用jQuery写了一个demo

运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tonjay</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="http://libs.baidu.com/jquery/1.10.0/jquery.min.js"></script>
</head>
<script>
$(document).ready(function(){
	var subW = -$(".sub").width() / 2;
	var subH = -$(".sub").height() / 2;
	$(".sub").css({"margin-left":subW,"margin-top":subH})
})
</script>
<body>
<style>
.main{ width: 200px; height: 200px; background: #3B8DBD; position: relative;}
.sub{ background: #fff; position: absolute; left: 50%; top: 50%; white-space: normal;}
</style>
<div class="main">
    <div class="sub">这是一行文字</div>
</div>
</body>
</html>

一般情况.sub高不固定,但是宽高应该是固定或者有个最大值。你可以尝试着在上面的文本框输入更多的文字,看看会出现哪些问题?可以尝试着去解决一下

另外,可以了解一下jQuery.width()的用法。

让div居中显示第3种方法

利用定位position和css3 transform,当然了,这个属性要考虑低端ie的就不要考虑了。比较适用于移动端及pc高端浏览器(TMD,其实也不高端了,都出来好多年了,都成普通的了)的项目。这个除了兼容性没有啥缺点,div.sub想多宽就多宽,想多高就多高,随意。

直接看demo

运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tonjay</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
<style>
.main{ width: 200px; height: 200px; background: #3B8DBD; position: relative;}
.sub{ width: 100px; height: 100px; background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
</style>
<div class="main">
    <div class="sub"></div>
</div>
</body>
</html>

让div居中显示第4种方法

利用flex布局让div.sub居中显示,这方法非常好用,兼容性也是你懂的。

运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tonjay</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
<style>
.main{ width: 200px; height: 200px; background: #3B8DBD; display: flex; justify-content: center; align-items: center; }
.sub{ background: #fff; max-width: 50%;}
</style>
<div class="main">
    <div class="sub">这是一行文字这是一行文字这是一行文字这是一行文字</div>
</div>
</body>
</html>

让div居中显示第5种方法

利用display布局让div.sub居中显示。display有个属性是table-cell,作用是将此元素作为一个表格单元格显示。大家都知道table里的td内容可以设置子元素居中,看一下demo就明白了

运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tonjay</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
<style>
.main{ width: 200px; height: 200px; background: #3B8DBD; display: table-cell; vertical-align: middle; text-align: center; }
.sub{ background: #fff; max-width: 50%; display: inline-block;}
</style>
<div class="main">
    <div class="sub">这是一行文字这是一行文字这是一行文字这是一行文字</div>
</div>
</body>
</html>

这个方法支持ie8及其以上浏览器!

TONJAY原创,转载注明出处。