文档章节

关于CSS制作水平/垂直居中对齐问题

ACE-705
 ACE-705
发布于 2014/05/07 01:36
字数 1587
阅读 1153
收藏 27

作为前端开发者,在制作Web页面时都有碰到CSS制作水平垂直居中的问题,我想大家都有研究过或者写过,特别是其中的垂直居中,更是让人烦恼。这段时间,我收集了几种不同的方式制作水平/垂直居中方法,我会将这几种方法分别介绍给大家,以供大家参考。或许对于像我们这样的初学者来说会有一定的帮助。

一、水平居中:

1.margin:0 auto

        这种方法主要使用margin: 0 auto配合元素的width来实现水平居中的效果;使用该方法实现元素水平居中一定要让元素满足两个条件:其一,元素需要有一个固定宽度值;其二元素的margin-left和margin-right都必须设置为auto,这两个条件少了任何一个都无法让元素达到水平居中的效果

 div{
    width:400px;
    margin:0 auto;
}

    此方法使用水平居中,支持所有浏览器运行是大家用得比较多,而且也是最常用、也是最凑效的方法。

2.text-align:center

        这种方法主要是针对单行文本居中或者table格式居中,主要运用的是text-align:center让元素水平居中;

body{text-align: center;

      该方法text-align有三个属性值:left|center|right,分别对应向左对齐,居中对齐,向右对齐,比较常用,推荐。

3.<center></center>(不建议使用)

       对于html4中已经淘汰的center标签,照样可以做到水平居中对齐,但是不建议使用;

 4.position定位

        对于定位也是常用的,在这里当然也可以采用定位的方法来实现水平居中:

body{
    position:absolute;
    left:50%;
}

        采用定位居中虽然常用,在使用过程中要计算偏移值,才能准确实现水平居中。

 5.margin/padding

     该方法对于div块中的水平居中对其,就是试着调:margin和padding,使用恰当合适的位置,会实现水平居中对其效果。

 

6.display:inline-block

    有时使用display:inline-block来实现水平居中,也有效果哦,但要使用这个就得在其父元素上设置text-align.

 body{
    text-align:center;
}
.content{
    display:inline-block;
}

 

7.css3提供的弹性盒模型

            弹性盒模型作为css3新引入的盒模型,能够轻松地创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局 ,对于它的实现原理大家可以通过下面的代码可以初步认识,要触发弹性盒模型适用 display: box, “box-orient”定义分布的坐标轴:vertical(垂直分布)和horizional(水平分布),默认情况下,盒子并不具有弹性,如果box-flex的属性值至少为1时,则变得富有弹性。如果盒子不具有弹性,它将尽可能的宽使其内容可见,且没有任何溢出,其大小由“width”和“height”来决定(或min-height、min-width、max-width、max-height)

<style type="text/css">    
        body{    
           display: box;    
          box-orient: horizontal;    
        }    
       #box1 {    
           box-flex: 2;    
        }    
        #box2 {    
            box-flex: 1;    
        }    
        #box3 {    
            box-flex: 1;    
        }    
    </style>    
    <body>    
        <div id="box1">1</div>    
        <div id="box2">2</div>    
        <div id="box3">3</div>    
    </body>

 

 8.负外边距(margin-left:-(width/2)px)

        负外边距同样可以解决水平居中对其的问题,但是要用到绝对定位(position:absolute;);

.divr{backgrond-color: #000;position: absolute;left: 50%;width: 1000px;margin-left: -500px;}

 

 9.css3中的fit-content

fit-content是CSS3中给width属性新加的一个属性值,它配合margin可以让我们轻松的实现水平居中的效果;

<style type="text/css">    
       .page ul { 
            width: -moz-fit-content;width:-webkit-fit-content;
            width: fit-content;margin-left: auto;    
 
      .page li {      
             line-height: 25px;margin: 0 5px;float: left;    
      }    
        .page a {      
             display: block;color: #f2f2f2;
            text-shadow: 1px 0 0 #101011;padding: 0 10px;border-radius: 2px;    
             box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;    
             background: linear-gradient(top,#434345,#2f3032);    
       }    
        .page a:hover {      
              text-decoration: none; box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;    
              background: linear-gradient(top,#f48b03,#c87100);    
        }    
    </style>    
    <div class="page">    
      <ul>    
        <li><a href="#">Prev</a></li>    
        <li><a href="#">1</a></li>    
        <li><a href="#">2</a></li>    
        <li><a href="#">3</a></li>    
        <li><a href="#">4</a></li>    
        <li><a href="#">5</a></li>    
        <li><a href="#">Next</a></li>    
      </ul>    
    </div>

    10.css3中的flex

 CSS3中的flex是一个很强大的功能,它能让我们的布局变得更加灵活与方便,而且它的实现相当便捷,扩展性强,唯一的缺点就是目前浏览器的兼容性较差。

<style type="text/css">    
         .page {      
            display: -webkit-box;    
            -webkit-box-orient: horizontal;-webkit-box-pack: center;display: -moz-box;    
            -moz-box-orient: horizontal;-moz-box-pack: center; 
            display: -o-box;-o-box-orient: horizontal;    
     -o-box-pack: center;display: -ms-box;-ms-box-orient: horizontal;-ms-box-pack: center;    
           display: box;box-orient: horizontal;box-pack: center;    
       }    
        .page li {      
              line-height: 25px;margin: 0 5px;float: left;    
       }    
       .page a {      
              display: block;color: #f2f2f2;
             text-shadow: 1px 0 0 #101011;
            padding: 0 10px;border-radius: 2px;    
             box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
            background: linear-gradient(top,#434345,#2f3032);    
       }    
        .page a:hover {      
             text-decoration: none;box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;    
             background: linear-gradient(top,#f48b03,#c87100);    
       }      
   </style>    
 <div class="page">    
      <ul>    
       <li><a href="#">Prev</a></li>    
        <li><a href="#">1</a></li>    
        <li><a href="#">2</a></li>    
       <li><a href="#">3</a></li>    
        <li><a href="#">4</a></li>    
       <li><a href="#">5</a></li>    
       <li><a href="#">Next</a></li>    
      </ul>    
    </div>

  二、垂直居中:

1.line-height行高

    该方法能实现垂直居中,但只能是单行文本居中(可适用于所有浏览器):

.content{
   height:100px;
   line-height:100px; 
}

 2.position定位

    该方法跟水平居中一样,垂直居中也可以采用定位的方法,但它的缺点是当没有足够的空间时,元素会消失。

.content{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}

  或者是:

.content{
    position:absolute;
    top:50%;
}

3.float浮动

    当然我们同样可以设置flaot浮动来达到垂直剧居中的效果,对于浮动,我们需要在之后清除,并显示在中间。

.content{
    float:left;
     height:50%;
     margin-bottom:-120px;
}
.footer{
    clear:both;
    height:240px;
    position:relative;
}

4.vertical-align: middle

vertical-align属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。  该方法可以随意改变元素高度,但在IE8中无效。 

.content{
    display:table-cell;
    vertical-align:middle;
}

        上面主要是收集了多种方法让元素实现垂直居中,大家可以在这几种方法上稍做改变就能实现其水平居中,这样就达到了元素水平垂直居中的效果。实现方法很多,大家可以根据需要选择不同的方法。以上是我收集并总结的部分方法,仅供参考,希望能给需要的朋友有所帮助。

 

© 著作权归作者所有

上一篇: jquery性能优化
ACE-705
粉丝 4
博文 8
码字总数 9017
作品 0
成都
私信 提问
探究 HTML元素的水平垂直居中

HTML: <body> <div class="maxbox"> <div class="minbox align-center"></div> </div></body> 父元素 .maxbox{ position: relative; width: 500px; height: 500px; margin: 5px; box-shado......

我输过但从未怕过
2016/03/04
22
0
关于CSS中的水平/垂直居中问题

关于css中的水平、垂直居中问题,我想大家也经常遇到过,而且这也是实用性比较高的用法,那么究竟有多少种方法呢?这边编者就做个小小的总结,有什么不足之处,还望大家多多指出。。。 一、横...

FT_Christ
2014/05/06
112
0
CSS制作水平垂直居中对齐各种方法总结

标签: 杂谈 分类: 网页前端 方法一: 这种方法用来实现单行垂直居中是相当的简单的,你只要保证元素内容是单行,并且其高度是固定不变的,你只要将其“line-height”设置成和“height”值一...

未央花开
2014/04/01
48
0
探秘 flex 上下文中神奇的自动 margin

为了引出本文的主题,先看看这个问题,最快水平垂直居中一个元素的方法是什么? 水平垂直居中也算是 CSS 领域最为常见的一个问题了,不同场景下的方法也各不相同,各有优劣。嗯,下面这种应该...

chokcoco
05/23
0
0
CSS笔记(〇):元素居中

0.水平居中 元素水平居中需求比较常见,常见的做法是通过margin来完成。 元素默认的margin-left和margin-right应该都是0。 而元素水平居中其实只需要把margin-left和margin-right都设置成aut...

大止刀口
2016/07/23
47
0

没有更多内容

加载失败,请刷新页面

加载更多

Hibernate 5 的模块/包(modules/artifacts)

Hibernate 的功能被拆分成一系列的模块/包(modules/artifacts),其目的是为了对依赖进行独立(模块化)。 模块名称 说明 hibernate-core 这个是 Hibernate 的主要(main (core))模块。定义...

honeymoose
27分钟前
2
0
CSS--属性

一、溢出 当内容多,元素区域小的时候,就会产生溢出效果,默认是纵向溢出 横向溢出:在内容和容器之间再套一层容器,并且内部容器要比外部容器宽 属性:overflow/overflow-x/overflow-y 取值...

wytao1995
46分钟前
4
0
精华帖

第一章 jQuery简介 jQuery是一个JavaScript库 jQuery具备简洁的语法和跨平台的兼容性 简化了JavaScript的操作。 在页面中引入jQuery jQuery是一个JavaScript脚本库,不需要特别的安装,只需要...

流川偑
今天
6
0
语音对话英语翻译在线翻译成中文哪个方法好用

想要进行将中文翻译成英文,或者将英文翻译成中文的操作,其实有一个非常简单的工具就能够帮助完成将语音进行翻译转换的软件。 在应用市场或者百度手机助手等各大应用渠道里面就能够找到一款...

401恶户
今天
3
0
jenkins 插件下载加速最终方案

推荐做法 1、告诉jenkins 我哪些插件需要更新 jenkins插件清华大学镜像地址 https://mirrors.tuna.tsinghua.edu.cn/jenkins/updates/update-center.json 1.进入jenkins系统管理 2.进入插件管...

vasks
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部