div垂直居中-div水平垂直居中的完美解决方案

发布时间：2017-10-02 所属栏目：verticalalign

一 : div水平垂直居中的完美解决方案

让div居中对齐
使用margin-left:auto;margin-right:auto; 可以让你的div居中对齐。
.style{margin-left:auto;margin-right:auto;}
缩写形式为：
.style{margin:0 auto;}
数字0 表示上下边距是0。可以按照需要设置成不同的值。

查看下面的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "-transitional.dtd"> <html xmlns="" lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>居中div演示效果</title> <style type="text/css"> .align-center{ margin:0 auto; /* 居中这个是必须的，，其它的属性非必须 */ width:500px; /* 给个宽度顶到浏览器的两边就看不出居中效果了 */ background:red; /* 背景色 */ text-align:center; /* 文字等内容居中 */ } </style> </head> <body> <div class="align-center">居中div演示效果</div> </body> </html>
<script language="JavaScript">ffcod = delpost.runcode12 .value; ffcod = (/
/g,''); delpost.runcode12 .value = ffcod;</script>提示：您可以先修改部分代码再运行

注意，需要加上上面的那句

才能生效，要是不想要这句的话，也可以给body加一个属性：
body{text-align:center;}

另外，让div内的内容（包括文字及图片）居中的代码是： text-align:center;

div居中的完美解决方案！（水平垂直居中）
1,关于居中使用css为：position:fixed;left:50%;top:50%;margin-left:width/2;margin-top:height/2;
对于ie6,只能把position:改成absolute;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "-transitional.dtd"> <html xmlns="" lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>水平垂直居中div演示效果</title> <style type="text/css"> .align-center{ position:fixed;left:50%;top:50%;margin-left:width/2;margin-top:height/2;} </style> </head> <body> <div class="align-center">水平垂直居中div演示效果</div> </body> </html>
<script language="JavaScript">ffcod = delpost.runcode13 .value; ffcod = (/
/g,''); delpost.runcode13 .value = ffcod;</script>提示：您可以先修改部分代码再运行

二 : div+css全屏自适应+水平垂直居中【同事武功传授】

代码作者：同事宁儿；

浏览吸收者：本人天少侠

代码如下：

verticalalign div+css全屏自适应+水平垂直居中【同事武功传授】 div+css全屏自适应[整体垂直居中]

/*兼容ie7-ie9、火狐、谷歌浏览器，div+css全屏自适应[整体垂直居中]*/ /*author:sn，time:2012-12-7*/ /*visitor:htt time:2012.12.7*/ /*html样例*/ <!DOCTYPE html PUBLIC "-//W3C//Ddiv XHTML 1.0 divansitional//EN" "http://www.w3.org/div/xhtml1/Ddiv/xhtml1-divansitional.ddiv"> <!-- saved from url=(0080)http://emap.shasm.gov.cn/TianDiTuSX/ResourceCenter/ServiceDetailInfo.aspx?ID=770 --> <html xmlns="http://www.w3.org/1999/xhtml"> <head>  <link rel="stylesheet" href="divPosition.css" type="text/css" /> </head> <body>  <div></div><!--定位元素，页面不显示，只为页面容器整体垂直对齐作参照-->  <div><!--父级垂直居中--> <!--子级上中下排列-->  <div id='divTop'>  </div>  <div id='divBody'>  </div>  <div id='divBottom'>  </div>  </div> </body> </html> /*css样例（divPosition.css）*/ html,body{  height: 100%;/*设置html和body的width和height为100%，可使全屏生效*/  width: 100%;  font-size: 16px;  font-family: 微软雅黑, 宋体, 黑体;  color: #535353;  margin: 0px; /*设置上下左右的相对位置为0，可避免超出范围出现滚动条*/ } body {  white-space: nowrap;/*设置white-space:nowrap，同时在相对参照元素中线居中时设定display:inline-block，可避免浏览器缩放时，垂直居中的容器换行*/  text-align: center;/*设置text-align: center，可使子容器水平对齐*/ } div {  display: inline-block;/*div内联不换行，ie8和ie9不识别带*的样式，只执行第一个display，ie6和ie7识别带*的样式，执行第二个display和zoom*/  *display:inline;/*ie6和ie7兼容display: inline-block，以【*display:inline;*zoom:1;】代替*/  *zoom:1; } .verticalAlign {  vertical-align: middle;/*设置vertical-align: middle，可使此和同一级别元素中线对齐*/  height: 100%;  width: 0px; /*设置width:0px，可使此元素不显示，只为页面容器整体垂直对齐作参照*/  border: none;  padding: 0px;  margin: 0px 0px 0px -5px;/*设置mrgin-right:-5px，避免容器横向超出*/ } .divAll {  width: 100%;  height: auto;  vertical-align: middle;/*设置vertical-align: middle，相对同一级别元素中线对齐*/  margin: 0px;  border: none;  padding: 0px; } /*以上为父级垂直居中，以下为子级上中下排列*/ .divBody {  width: 100%;  min-width: 900px;  vertical-align: middle;/*设置vertical-align: middle，相对同一级别元素中线对齐*/  margin: 0px;  border: none;  padding: 0px; } .divTop {  background-image: url(../images/serviceDetail_logo.png);  background-repeat: no-repeat;  height: 61px;  width: 80%;  min-width: 900px;  margin-left: auto;/*设置高度，并设置margin的left和right为auto，在非absolute情况下可水平居中*/  margin-right: auto;  border-bottom: 5px solid #ff8a00;  vertical-align: top;/*设置vertical-align: top，相对同一级别元顶端对齐*/  display: block;/*div内联换行*/ } .divBottom {  width: 100%;  min-width: 900px;  height: 100px;  margin: 0px;  vertical-align: bottom;/*设置vertical-align: bottom，相对同一级别元素底端对齐*/  display: block; }

三 : CSS文字垂直居中

[css 居中]CSS文字垂直居中——简介
文字在div中居中一直是个问题，而且也有很多方法可以居中。我就说个最简单最大众化的吧。
[css 居中]CSS文字垂直居中——详细知识

[css 居中]CSS文字垂直居中一
一、单行垂直居中如果一个容器中只有一行文字，对它实现居中相对比较简单。先看代码吧。
我们要垂直居中的文字为‘how are you’
<div style=' height:105px;line-height:105px;overflow:hidden;border:1px solid #FF0099;text-align:center' >how are you`</div>

[css 居中]CSS文字垂直居中二
那我们先来看看效果图片吧。height的高度要等于line-height。这样文字就可以居中了。
也许还是不满足还想横着居中吧。

[css 居中]CSS文字垂直居中三
先看看代码吧。
<div style=' height:105px;line-height:105px;overflow:hidden;border:1px solid #FF0099;text-align:center' >how are you`</div>
这行代码也就是多了text-align:center。
这个就横着居中

[css 居中]CSS文字垂直居中四
来看看效果图片吧。

本文标题：div垂直居中-div水平垂直居中的完美解决方案
本文地址： http://www.61k.com/1114431.html

上一篇：毕业赠言老师-就业讲师毕业赠言
下一篇：小米小钢炮蓝牙音箱-199元新版小米蓝牙音箱发布小巧精致

61阅读

div垂直居中-div水平垂直居中的完美解决方案