脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS教程 >

网页制作中的水平居中和垂直居中解决方法集合

  发布时间：2010-01-23 14:29:12   作者：佚名   我要评论
　在定义网页的CSS样式的时候，我们或许并不怎么用到垂直居中。
在jb51.net中，大量的文章介绍了这些知识。在和别人合作的时候，你的代码的自适应性就需要做到最大程度的好。你自己在做自己的网页的时候或许可以保证在视觉上是居中的，但是如果让这个元素或者他的父元素变大了，你还能保证居中吗？

　　vertical-align是个不错的属性，但是这个属性起初是针对表格的cell的。当然这个属性虽然对块级元素不起作用，但是对行内元素比如span还是有作用的（这时候，这个属性设置为负值元素内容就下移，正值则上移）。

　　下面是比较专业的垂直居中的集中解决方案。记录于此，以便查阅。

1、单行垂直居中

　　文字在层中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的高度相同! 

<div style="line-height:500px;height:500;">

2、层水平居中

　　设置div的宽度小于父div的宽度，设置 margin:0 auto;，即可让div居中。

#parentdiv
{
width: 500px;
}
#childdiv {
width: 200px;
margin:0 auto;
}

3、层中的文字水平居中

　　在childdiv的css加上text-align:center;

#parentdiv
{
width: 500px;
}
#childdiv {
width: 200px;
margin:0 auto;
text-align:center;
}

4、div层垂直居中

<div style="width:275px;height:375px;border: solid red;">
<div style=" background:green;height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
     <div
           style=" background:red;position:static;position:absolute\9; top: 50%;">
        <div
            style=" background:blue;position: relative; top: -50%;">
                     www.jb51.com
         </div>
      </div>
   </div>
</div>

5、div层垂直水平居中，英文超长换行

   <div style="float:left;width:275px;height:375px;border: solid red;">
<div
          style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
          <div
           style="position:static;position:absolute\9; top: 50%;">
           <div style="position: relative; top: -50%; text-align: center;">
              <div style="width: 85px;WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all;margin:0 auto;">
            www.jb51.comwww.jb51.comwww.jb51.comwww.jb51.comwww.jb51.comwww.jb51.comwww.jb51.com 
              </div>
                     
              </div>
          </div>
         </div>
</div>

6、div垂直滚动

<div
              style="width: 160px; height: 260px; overflow-y: scroll; border: 1px solid;">


              www.jb51.com
             </div>

7、垂直居中和使用text-align水平居中

<div style="float:left;width:275px;height:375px;border: solid red;">
<div
          style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
          <div
           style="position:static;position:absolute\9;top: 50%;">
           <div
            style="position: relative; top: -50%; text-align:center;">
            <div style="width: 275px;">
                      <div style="width: 160px;WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all;text-align:left;">
            www.jb51.comwww.jb51.comwww.jb51.comwww.jb51.comwww.jb51.comwww.jb51.comwww.jb51.com
              </div>
              </div>
                     
              </div>
          </div>
         </div>
</div>

8、垂直居中和使用margin水平居中

    <div style="float:left;width:275px;height:375px;border: solid red;">
<div
          style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
          <div
           style="position:static;position:absolute\9; top: 50%;">
           <div
            style="position: relative; top: -50%; ">
            
                      <div style="margin:0 auto;width: 160px;WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all;">
            www.jb51.comwww.jb51.comwww.jb51.comwww.jb51.comwww.jb51.comwww.jb51.comwww.jb51.comwww.jb51.com
              </div>
             
                     
              </div>
          </div>
         </div>
</div>

相关文章

  • CSS盒子模型、圆角边框、盒子阴影效果实现

    盒子模型是网页布局的基础,包括边框、外边距、内边距和实际内容,通过CSS可以控制盒子之间的距离及其外观,如边框样式、边框颜色等,重要属性包括padding和margin,分别控制内
    2024-10-18

  • CSS盒子模型、圆角边框、盒子阴影效果实现

    盒子模型是网页布局的基础,包括边框、外边距、内边距和实际内容,通过CSS可以控制盒子之间的距离及其外观,如边框样式、边框颜色等,重要属性包括padding和margin,分别控制内
    2024-10-18

  • CSS使用filter和backdrop-filter实现高斯模糊效果(示例代码)

    本文详细介绍了CSS3中的两个实现高斯模糊效果的API：filter和backdrop-filter,filter可以直接在图像或背景图上添加多种效果,而backdrop-filter则用于在元素后的区域添加效
    2024-09-26

  • CSS 中的overscroll-behavior属性详解

    overscroll-behavior是CSS中用于控制元素滚动边界行为的属性,可通过设置为auto、contain或none来指定当元素滚动超出边界时的处理方式,本文给大家介绍CSS 中的overscroll-be
    2024-09-26

  • css实现四角边框效果

    本文介绍了如何通过CSS实现具有四角边框的效果,使用了linear-gradient和background属性来创建边框,并设置了背景尺寸,文章还提供了Vue中图片资源引用的示例代码,适合想要为
    2024-09-24

  • CSS的:required和:optional伪类：如何增强表单字段的视觉识别

    在网页设计中,使用CSS的:required和:optional伪类可以有效增强表单字段的视觉识别,提升用户体验和表单的可访问性,这两个伪类分别用于区分必填和非必填字段,通过添加不同的
    2024-09-18

  • css边框修饰实现代码

    本文介绍了CSS中设置边框的几种主要属性,包括边框样式（如实线、虚线等）、边框宽度（可以单独设置每个方向的宽度）、边框颜色（支持单独为每个方向设置颜色）以及圆角边框
    2024-09-18

  • 如何利用CSS实现视差滚动和抖动效果

    通过CSS3和JS,实现前端炫酷的视差滚动和抖动效果,本文详细介绍了相关CSS样式和JS脚本,通过监听滚动条位置并调整元素的top属性来达到视差效果,当到达特定位置时,利用CSS动画
    2024-09-13

  • CSS文本超出后隐藏并显示省略号及其他浏览器兼容方案(推荐)

    在CSS中，可以通过简单的样式设置实现文本超出隐藏并显示省略号的效果,这些方法主要适用于WebKit内核的浏览器，对于其他浏览器，可采用JavaScript或CSS Fallback等方案,文
    2024-09-11

  • css 自定义变量 var()案例分析

    这篇文章主要介绍了css 自定义变量 var()案例分析,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，感兴趣的朋友跟随小编一起看看吧
    2024-08-28

最新评论

关注微信公众号

扫一扫