CSS实现DIV居中的三种方法
发布时间：2018-01-30 13:59:17 作者：佚名 
我要评论
我要评论本文通过实例代码给大家分享了css实现div居中的方法，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
下面给大家分享div居中的实现代码，具体代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.div1{ width: 100px; height: 100px; border: 1px solid #000000;}
.div2{ width:40px ; height: 40px; background-color: green;}
</style>
<div class="div1">
<div class="div2">
</div>
</div>
</body>
</html>
如上的两个div，实现div2在div1里面是居中显示
一、方法一
利用margin，div1的宽减去div2的宽就是div2margin-left的数值：（100-40）/2=30
div1的高减去div2的高就是div2margin-top的数值：（100-40）/2=30
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.div1{ width: 100px; height: 100px; border: 1px solid #000000;}
.div2{ width:40px ; height: 40px; background-color: green;}
.div22{
margin-left: 30px;margin-top: 30px;
}
</style>
<div class="div1">
<div class="div2 div22">
</div>
</div>
</body>
</html>
二、方法二
利用css的 position属性，把div2相对于div1的top、left都设置为50%，然后再用margin-top设置为div2的高度的负一半拉回来，用marg-left设置为宽度的负一半拉回来，css如下设置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.div1{ width: 100px; height: 100px; border: 1px solid #000000;}
.div2{ width:40px ; height: 40px; background-color: green;}
.div11{
position: relative;
}
.div22{
position: absolute;top:50%;left: 50%;margin-top: -20px;margin-left: -20px;
}
</style>
<div class="div1 div11">
<div class="div2 div22">
</div>
</div>
</body>
</html>
三、方法三
还是用css的position属性，如下的html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.div1{ width: 100px; height: 100px; border: 1px solid #000000;}
.div2{ width:40px ; height: 40px; background-color: green;}
.div11{
position: relative;
}
.div22{
position: absolute;margin:auto; top: 0;left: 0;right: 0;bottom: 0;
}
</style>
<div class="div1 div11">
<div class="div2 div22">
</div>
</div>
</body>
</html>
四、方法四
利用css3的新增属性table-cell
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.div1{ width: 100px; height: 100px; border: 1px solid #000000;}
.div2{ width:40px ; height: 40px; background-color: green;}
.div11{
display: table-cell;vertical-align: middle;
}
.div22{
margin: auto;
}
</style>
<div class="div1 div11">
<div class="div2 div22">
</div>
</div>
</body>
</html>
这个方法还有一个好处就是，div2的高度可以不固定，如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.div1{ width: 100px; height: 100px; border: 1px solid #000000;}
.div2{ width:40px ; background-color: green;}
.div11{
display: table-cell;vertical-align: middle;
}
.div22{
margin: auto;
}
</style>
<div class="div1 div11">
<div class="div2 div22">
div居中方法
</div>
</div>
</body>
</html>
总结
以上所述是小编给大家介绍的CSS实现DIV居中的三种方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对程序员之家网站的支持！
相关文章
- 下面小编就为大家带来一篇不定宽高的文字在div中垂直居中实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-30
- 下面小编就为大家带来一篇关于div中img,span垂直居中的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-26
- 这篇文章主要介绍了让Div实现水平或垂直居中的相关方法,包括使用js来对实际产生的居中问题进行修正的方法,需要的朋友可以参考下2015-08-06
- 这篇文章主要介绍了div中内容上下居中小结,需要的朋友可以参考下2015-02-05
css中position:fixed实现div在窗口上下左右居中
实现div居中的方法有很多，本例介绍的使用css中position:fixed来实现div的上下左右居中，下面以一个DIV 元素在浏览器窗口居中为例2014-10-20css中position:fixed实现div居中上下左右居中
实现div居中的方法多如牛毛，本例为大家介绍的这个方法是使用css中position:fixed来实现div上下左右居中，这个小技巧比较使用，大家看看2014-10-14- 这篇文章主要为大家介绍了在DIV+CSS布局的页面里，让布局、背景图片、文字内容居中的方法，从布局内容到页面里文章文字居中都是非常重要的，而css来设置居中也是非常简单的2014-10-09
- 在IE9下面本来应该居中的，结果显示为居左，在IE9以上的版本中，只需要设置 margin：0px auto; 就可以使得DIV居中，下面的示例，大家可以参考下2014-09-26
- 对于页面上的块级元素，只须定宽及设置margin:auto 0;即可在垂直上居中，但对于浮动的元素垂直居中是无效的。那么我们如何来处理这个问题呢，今天我们来探讨下。2014-09-12
最新评论