DIV+CSS中让布局、背景图⽚、⽂字内容居中的⽅法  在DIV CSS布局的页⾯⾥，从布局内容到页⾯⾥⽂章⽂字居中都是⾮常重要的，⽽css来设置居中也是⾮常简单的。
  1、⾸先介绍使⽤css属性让整体布局的居中：
  设置对象的⽗级内容居中，这⾥⼀个页⾯的为⽗级是什么呢？我们可以想象整个页⾯的内容是由<html></html>和<body> </body>这两个包含，那根据较近⽗级我们就设置body的CSS来实现居中问题，可以向在内容⾥居中有text-align:center；具体css的居中代码为：
  body{text-aligh:center; }  但是即使这样也会出现问题，因为你没有设置布局有多宽“width  ”，⼀旦你内容布局中在最外层css控制中，设置了float：属性，那布局将会向你设置的float:⽅向靠，解决⽅法，除了设置body的居中的css属性外，还需对布局对象设置居中，⽽且或定义宽度是多少，假如⽹页宽度为700px，最外层css样式为的class="weicheng"，那设置应该这
样“.weicheng{margin:0 auto; width:700px;}  ”即可⽽这个元素在IE下有⽤，经过试验在⽕狐等浏览器下只除了此⽗级（body）设置text-aligh:center；居中是⽆法让布局居中，那我们还需要对该对象设置个“margin:0  auto ; ”这个是什么意思呢，意思是内容上下为0距离，⽽左右为“auto  ”⾃动，这样就可以设置实现⽹页布局居中(这⾥设置margin:5px auto; ⼀样效果不影响实验)。完整实例为（可将代码拷贝新建html⽂件浏览观看效果）：
复制代码
代码如下:
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
text align center  <title>的CSS div的布局居中实例</title>  <style type="text/css">
  <!--
  body{ text-align:center; }
  .waicheng {color: #0066CC; margin:5px auto; width:700px;height:200px; border:1px solid #000000;}
  -->
  </style>
  </head>
  <body>
  <div class="waicheng">我是css中的居中的实验；我的布局外层有⼀个边为1px⿊⾊边，我宽700px，⾼为200px，设置了与顶部内容距离为5PX</div>
  </body>
  </html>
  2、介绍使⽤css属性让⽹页的背景居中：
  这⾥居中就包括了左右居中与上下居中，居中代码如下：
  3、css让介绍⽂字、图⽚内容左右上下居中⽅法教程：
  我们知道左右就中好办，直接⽤text-align:center; 即可让⽂字与图⽚内容居中，但是垂直呢，假如我们在⾼度为120px的⾼度下垂直居中，图⽚居中是vertical-align:middle;css属性，⽂字居中就要靠设置⾏⾼⽅法居中⽂字内容，这⾥我们设置为120px的⾼度这需要设置个line-height:120px；这样就通过css属性类样式来实现⽂字与图⽚的上下左右居中。
  整个⽹站居中的代码如下：
复制代码
代码如下:
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title>www.www.jb51/的CSS div的完整居中实例</title>
  <style type="text/css">
  <!--
  body{ text-align:center; margin:0 auto;
  background:url(www.jb51/img/css-logo.gif) no-repeat center;}
  .waicheng {color: #0066CC; margin:5px auto;width:700px; height:120px; line-height:120px; border:1px solid #000000; }  .waicheng img {vertical-align:middle;}
  -->
  </style>
  </head>
  <body>
  <div class="waicheng">我是css中的居中的完整居中实例；我的布局外层有⼀个边为1px
  <img src="www.www.jb51//img/css-logo.gif" alt="图⽚内容居中" /></div>
  </body>
  </html>
  以上就是利⽤DIV+CSS中让布局居中、背景图⽚居中、⽂字内容居中的代码，谢谢阅读，希望能帮到⼤家，请继续关注，我们会努⼒分享更多优秀的⽂章。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。