您的位置:首页 > div css问集 > 【 返回上一页

div 居中使用CSS如何实现 [已解决]

在网页div css布局中,如何让div布局居中于浏览器中间(如何让div水平居中)?有时候布局的网页在有的浏览器中是水平居中的,但有的时候网页中浏览器中是居左的,div 居中兼容不好如何解决?

以下是thinkCSS为大家介绍CSS div居中问题所在与对应解决方法。

DIV居中条件与关键CSS
1、body设置text-align:center
2、div设置margin:0 auto

完整DIV居中CSS代码:

body{text-align:center}
.abc{margin:0 auto}

这个是DIV 居中主要的CSS代码,其它样式根据需求设置。

完整DIV 居中小实例
HTML +CSS代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div的居中</title>
<style>
body{ text-align:center}
.exp{ border:1px solid #F00; width:300px; margin:0 auto}
</style>
</head>
<body>
<div class="exp">为了看见DIV居中,对起设置边框和宽度</div>
</body>
</html>

成功设置DIV水平居中截图

div居中实例效果
div居中实例效果截图

相关标签: div 居中
如需转载,请注明文章出处和来源网址:http://www.thinkcss.com/wenti/1195.shtml

日期:2016-12-28 15:43:14 来源:www.thinkcss.com 作者:div css

热门点击