资讯专栏INFORMATION COLUMN

css实现垂直居中

raise_yang / 1132人阅读

摘要:结构垂直居中默认样式结构该方法兼容,火狐,谷歌,并且是否有宽高都可以。兼容火狐谷歌参考布局左右居中上下居中绝对定位和负边距该方法兼容,火狐,谷歌,必须有宽高。

html结构

<div class="box box2">
    <span class="content content2">垂直居中span>
div>

默认css样式结构

.box{
    width:200px;
    height:200px;
    background-color:green;   
}
.content{
    background-color:yellow;   
}

1. table-cell     该方法兼容IE8+,火狐,谷歌,并且content是否有宽高都可以。  注:IE8+ 包含 IE8

.box2{
    display:table-cell;      //此元素会作为一个表格单元格显示(类似  和 )
    text-align:center;       //左右居中
    vertical-align:middle;   //上下居中        
}

2. display: flex;      该方法不兼容IE8,IE9content是否有宽高都可以。兼容火狐、谷歌

参考flex布局:https://www.cnblogs.com/qingchunshiguang/p/8011103.html

.box2{
    display: flex;
    justify-content:center;  //左右居中
    align-items:center;      //上下居中
}

3. 绝对定位和负边距      该方法兼容IE8+,火狐,谷歌,content必须有宽高

.box2{
position:relative;
} .content2{ position:absolute; top:
50%; left:50%; margin-top:-40px; margin-left:-40px; }

4. 绝对定位和0       该方法兼容IE8+,火狐,谷歌,content必须有宽高。

.box2{
    position:relative;
}
.content2{
    margin:auto;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

5. 绝对定位和transform     该方法不兼容IE8,兼容IE9+,火狐,谷歌,content是否有宽高都可以。

.box2{
    position:relative;
}
.content2{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

6. display:flex 和 margin:auto      content有宽高:不兼容IE8,IE9,content没有宽高:不兼容IE。有无宽高都兼容火狐、谷歌。

.box2{
    display: flex;
    text-align: center;
}
.box2 .content2{margin: auto;}

参考网址:https://www.cnblogs.com/hutuzhu/p/4450850.html

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1648.html

相关文章

  • 【基础】这15种CSS居中的方式,你都用过哪几种?

    摘要:水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等,从而使元素垂直居中。 简言 CSS居中是前端工程师经常要面对的问题,也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种。...

    Apollo 评论0 收藏0
  • 【基础】这15种CSS居中的方式,你都用过哪几种?

    摘要:水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等,从而使元素垂直居中。 简言 CSS居中是前端工程师经常要面对的问题,也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种。...

    Scholer 评论0 收藏0
  • 【基础】这15种CSS居中的方式,你都用过哪几种?

    摘要:水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等,从而使元素垂直居中。 简言 CSS居中是前端工程师经常要面对的问题,也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种。...

    mayaohua 评论0 收藏0
  • 【前端】这可能是你看过最全的css居中解决方案了~

    摘要:水平居中行内元素解决方案适用元素文字,链接,及其其它或者类型元素,,部分代码文字元素链接元素链接元素链接元素部分代码解决方案将元素包裹在一个属性为的父级元素中如设置这个父级元素属性即可现在大家可以看到和中的子元素水平居中了水平居 1.水平居中:行内元素解决方案 适用元素:文字,链接,及其其它inline或者inline-*类型元素(inline-block,inline-table,i...

    csRyan 评论0 收藏0
  • 【前端】这可能是你看过最全的css居中解决方案了~

    摘要:水平居中行内元素解决方案适用元素文字,链接,及其其它或者类型元素,,部分代码文字元素链接元素链接元素链接元素部分代码解决方案将元素包裹在一个属性为的父级元素中如设置这个父级元素属性即可现在大家可以看到和中的子元素水平居中了水平居 1.水平居中:行内元素解决方案 适用元素:文字,链接,及其其它inline或者inline-*类型元素(inline-block,inline-table,i...

    Simon 评论0 收藏0
  • CSS/CSS3 实现 居中(水平&垂直

    摘要:,水平居中行内元素把行内元素放在一个属性块元素中,然后设置父层元素属性居中,水平居中块状元素设置外边距,水平居中多个块状元素把块状元素属性,然后设置父层元素属性居中,水平居中多个块状元素布局实现把块状元素的父元素属性和,如下设置, 1,水平居中:行内元素 把行内元素放在一个属性块(display:block)元素中,然后设置父层元素属性居中: .test { text-align:ce...

    genedna 评论0 收藏0

发表评论

0条评论

raise_yang

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<