元素水平垂直居中的办法

居中

一:使用margin进行固定长度的偏移

在使用margin进行具体高度的偏移时,需要知道父元素和子元素的具体的宽高尺寸

1:水平方向居中

在进行水平方向上的居中时,可对子元素样式使用

margin:0 auto;

2:垂直方向居中

在使用margin进行垂直方向上的居中时,至少要满足三个条件中的一条才能达到垂直居中的效果,否则子元素和父元素会一同被带下来。三种前提条件分别是:

1)为父元素设置border;

2)为父元素设置padding;

3)在父元素中添加overflow:hidden的样式。(在标准盒子模型中前两种会将盒子模型的既定尺寸扩充,在没必要设置padding和border时不建议使用前两种方法。)。

/*关键样式代码*/

```

#father{

          overflow: hidden;

      }

  #son{

          margin:0 auto;/*水平居中*/

          margin-top: 50px;

        }

```

分析:对父元素使用overflow:hidden子元素使用margin-top进行下移实现垂直居中。

缺点:在进行垂直居中时你需要明确父元素的height,并且进行计算,如果父元素的高度变了,子元素将不再垂直居中,还要再修改数据,维护性极差。

二;使用绝对定位并进行偏移

1)首先需要将父元素样式设置position:relative;

2)将子元素样式设置position:absolute;

3)使用left和top进行定位实现居中;

注意:只有在元素使用position:relative/absolute/fixed才能使用top/left/bottom/right/z-index属性,同时元素的float,clear会失效。

/*关键样式代码*/

```

#father{

        position:relative;

      }

  #son{

        position: absolute;

        left:50%;

        margin-left: -50px;

        top:50%;

        margin-top: -50px;

        }

```

注意:在使用绝对定位进行百分比偏移时他是将子元素整体偏移到另半边,而不是将子元素的中轴线对准父元素的中轴线,所以还要使用margin-left:-50px;将子元素的一半偏移回来。

/*优化代码(使用css样式中的计算公式)*/

```

#son{

        position: absolute;

        left:calc(50% - 50px);

        top:calc(50% - 50px);

        }

```

注意:计算公式中的运算符前后都需要有空格隔开!!!

缺点:在使用left/top进行偏移50%之后,再使用margin-top/left偏移回子元素的一半。这就需要明白子元素的具体的尺寸,当子元素的尺寸有改变时,布局就会被破坏,维护性也极差。

三:使用绝对定位并margin自适应进行居中

1)首先需要将父元素样式设置position:relative;

2)将子元素样式设置position:absolute;

3)将left/top/bottom/right:0;

4)margin:auto;

/*关键样式代码*/

```

#father{

        position:relative;

      }

  #son{

        position: absolute;

        left: 0;  top: 0;

        right: 0;

        bottom: 0;

        margin:auto;

        }

```

分析:这种居中方式采用的是流体自适应居中,将left/top/bottom/right四个属性都设置为0表示子模块相对于四条边的偏移量都是零,这时再放进去一个margin:auto;,在满足前边四个属性的条件下进行margin的auto布局,就可以实现垂直居中。

优点:维护性高,不需要知道父子元素的具体尺寸也可以实现居中的效果。

四: 使用table-cell进行居中显示

/*关键样式代码*/

```

#father{

            display: table-cell;

            vertical-align: middle;

        }

    #son{

            margin: 0 auto;

        }

```

分析:将父元素display:设置为table-cell,此时就可以使用vertical-align: middle对内部的子元素进行垂直居中。之后在子元素样式中使用margin: 0 auto;实现水平居中

注意:父容器的设置display: table-cell;后,如果想要将父容器本身使用margin居中无法达到效果,因为margin对display为table-cell的无效。涉及到table的样式相对较为复杂,所以不建议使用。

五:使用弹性盒子来实现居中

css3中提供了一种响应式布局的方案:弹性盒子。他可以适应不同屏幕的大小和不同的设备类型。同时,它也提供了更加有效地方式来对容器的子元素进行排列和对齐,以及分配剩余空白空间。但是由于现在弹性盒子是css3的新的布局模式,所以有些浏览器还没有兼容,需要添加一些浏览器前缀,以达到兼容的效果。

/*关键样式代码*/

```

#father{

          display: flex;

          justify-content: center;

          align-items: center;

        }

```

分析:设置display为flex,同时在默认情况下flex-direction为row,即主轴线为水平方向,副轴为垂直方向。设置justify-content为center,可以将元素在主轴(水平)方向上居中显示,设置align-items可以将元素在副轴(垂直)方向上居中显示。

优点:维护性高,而且弹性盒子可以完成浮动和定位所能达到的效果,而且相当的简

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.绝对定位居中技术 我们一直用margin:auto实现水平居中,而一直认为margin:auto不能实现垂直居...
    DecadeHeart阅读 1,631评论 0 3
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 975评论 0 1
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,331评论 0 5
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 1,513评论 0 5
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,672评论 0 30