网页设计里怎么垂直居中

1、关于网页设计CSS 文本垂直居中的问题

text-align:center;文本居中显示
vertical-align:middle;元素居中显示
height:45px;文本框高度
不管文本框高度多少默认的光标都是在文本框的中间的哦。
希望可以帮到你……

2、网页设计里让一个div标签里的文字竖直居中用哪个标签？

如果是单行文字想垂直居中，只要保证div高和行高保持一致，就可以了。用下面的代码即可实现：

CSS代码：

#div-a{
height:60px;
line-height:60px;
}

HTML代码：

<div id="div-a">
......
</div>

如果是多行文字，上面的垂直居中的方法就不行了，得用变通的方法实现；这里建议使用table方法，在table外面再套上相应的div，

代码如下：

<table>
<tr><td style="vertical-align:middle;height:300px;background-color:red">
</td></tr>
</table>

多行文字居中还有另外一种方法：

多行内容居中，且容器高度可变，也很简单，给出一致的 padding-bottom 和 padding-top 就行：

.middle-demo-2
{
padding-top: 24px;
padding-bottom: 24px;
}

3、html中垂直居中有几种 怎么实现

如果是要Div里的内容垂直居中就用line-height:值；这个值等于Div的高度就可以垂直居中；但是内文字千万不要换行，容虽然line-height可以使内容垂直居中，但因为line-height这属性是设置行高的，如果你的内容换行了，那line-height还等于层的高度的话，这就不行了。
如果是Table表格的垂直居中呢，就Td里写valign="middle"就可以了。

水平居中文字内容用Css写的就是用text-align:center;如果是水平居中层的话在IE6可以用text-align:center;这个，但在其他浏览器上可能不起作用，所以就用margin:0px
auto;这个方法把层水平居中是最好的

4、网页制作中如何实现图片在div内垂直水平居中

.photo { position:relative; display:table-cell; width:200px; height: 200px; border:1px solid #000; overflow:hidden; vertical-align:middle;}
.photo p {position:static; +position:absolute; top:50%;}
.photo img { position:static; +position:relative; top:-50%;left:-50%;}

<div class="photo"><p><img src="images/img.jpg" alt=""/></p></div>

以上是纯css的方法，当然也可以拿js写

5、网页制作图片怎么居中

图片的宽度和高度是未知的，没有一个固定的尺寸，在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中，想想感觉还是挺麻烦的，由于最近的项目可能会用到这个方案，所以把一些常用的方法都收集整理了一下。

下图是理想中的效果图，外部容器的宽度和高度是固定的，中间的图片宽度和高度未知，但是图片要始终要相对于外部的容器垂直居中。

但是实际中实现的效果并不是很完美，由于各浏览器的解析都各不相同，所以各浏览器都会有1px-3px的偏差。

方法一 (XHTML 1.0 transitional)：

该方法是将外部容器的显示模式设置成display:table，img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样就可以很方便的使用vertical-align象表格元素那样对齐了，当然这只是在标准浏览器下，IE6/IE7还得使用定位。

HTML结构部分：

<div id="box">
  <span><img src="images/demo.jpg" alt=""></span>
</div>

CSS样式部分：

<style type="text/css">
#box{
width:500px;height:400px;
display:table;
text-align:center;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
display:table-cell;
vertical-align:middle;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#box{
position:relative;
overflow:hidden;
}
#box span{
position:absolute;
left:50%;top:50%;
}
#box img{
position:relative;
left:-50%;top:-50%;
}
</style>
<![endif]-->

方法二 (XHTML 1.0 transitional)：

方法二和方法一的实现的原理大同小异，结构也是相同的，方法一用的是条件注释，方法二就用的CSS Hack。

CSS样式部分：

<style type="text/css">
#box{
width:500px;height:400px;
overflow:hidden;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
position:static;
*position:absolute; /*针对IE6/7的Hack*/
top:50%; /*针对IE6/7的Hack*/
}
#box img {
position:static;
*position:relative; /*针对IE6/7的Hack*/
top:-50%;left:-50%; /*针对IE6/7的Hack*/
border:1px solid #ccc;
}
</style>

该方法有个弊端，在标准浏览器下由于外部容器#box的显示模式为display:table-cell，所以导致#box无法使用margin属性，并且在IE8下设置边框也无效。

方法三 (XHTML 1.0 strict)：

标准浏览器还是将外部容器#box的显示模式设置为display:table-cell，IE6/IE7是利用在img标签的前面插入一对空标签的办法。

HTML结构部分：

<div id="box"><i></i><img src="images/demo.jpg" alt=""></div>

CSS样式部分：

<style type="text/css">
#box{
width:500px;height:400px;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if IE]>
<style type="text/css">
#box i {
  display:inline-block;
  height:100%;
  vertical-align:middle
  }
#box img {
  vertical-align:middle
  }
</style>
<![endif]-->

方法三也同样适用XHTML 1.0 transitional。以上方法都是收集于网页教学网，暂时只对这3个方法比较满意，兼容性方面不错，使用起来的限制也比较小，还有些方法我也都一一测试过，效果都不理想，在各浏览器中的差异比较大。另外司徒正美这里也收集了一些方法。

6、html中垂直居中有几种?怎么实现?

html垂直居中有4中方法。

分别有：使用line-height；使用表格；利用display:table-cell；使用绝对定位。专

7、网页怎么把div居中在网页中心(水平垂直都居中)

其实解决的思路是这样的：首们需要position:absolute;绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。
如：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现了层垂直居中于浏览器的样式编写。

div {

        position:absolute;
        top:50%;
        left:50%;
        margin:-150px 0 0 -200px;
        width:400px;
        height:300px;
        border:1px solid #008800;
   }

参考：http://blog.sina.com.cn/s/blog_618380f70101da7i.html

8、div+css 我想让整个网页在屏幕中垂直居中怎么设置

给你这两个例子：
《CSS实现 DIV 在页面垂直居中内两例容》
http://www.foreweb.com/Article/200612/1232.html

9、网页设计垂直居中

如果层中间的元素要垂直居中就要设置上面边距 margin 设置上下 等值的margin

如果设置表格中的元素中间 只要设置 align=“center”和valign=“middle” 就好了

10、如何让整个页面内容垂直居中

可利用js实现，可适应不同分辨率自动计算，示例代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
html,body { margin:0; padding:0; overflow:hidden; height:100%; }
#test { margin:0 auto; border:1px solid #666; background-color:#CCC; width:500px; }
</style>
<script type="text/javascript">
function makeItMiddle() {
document.getElementById('test').style.marginTop = (document.getElementsByTagName('body')[0].offsetHeight - document.getElementById('test').offsetHeight) / 2 + 'px';
}
window.onload = makeItMiddle;
window.onresize = makeItMiddle;
</script>
</head>

<body>
<div id="test"><p> </p></div>
</body>
</html>