zoukankan      html  css  js  c++  java
  • CSS 元素垂直居中的 6种方法

    利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可。本文收集了六种利用css进行元素的垂直居中的方法,每一种适用于不同的情况,在实际的使用过程中选择某一种方法即可。

    Line-Height Method

    line height demo
    试用:单行文本垂直居中

    代码:

    html

    <div id="parent">
    <div id="child">Text here</div>
    </div>

    css

    #child {
    line-height: 200px;
    }

    垂直居中一张图片,代码如下

    html

    <div id="parent">
    <img src="image.png" alt="" />
    </div>

    css

    #parent {
    line-height: 200px;
    }
    #parent img {
    vertical-align: middle;
    }

    CSS Table Method

    table cell demo

    适用:通用

    代码:

    html

    <div id="parent">
    <div id="child">Content here</div>
    </div>

    css

    #parent {display: table;}
    #child {
    display: table-cell;
    vertical-align: middle;
    }

    低版本 IE fix bug:

    #child {
    display: inline-block;
    }

    Absolute Positioning and Negative Margin

    absolute positioning and negative margin demo

    适用:块级元素

    代码:

    html

    <div id="parent">
    <div id="child">Content here</div>
    </div>

    css

    #parent {position: relative;}
    #child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
     50%;
    margin: -15% 0 0 -25%;
    }

    Absolute Positioning and Stretching

    absolute positioning and vertical stretching demo

    适用:通用,但在IE版本低于7时不能正常工作

    代码:

    html

    <div id="parent">
    <div id="child">Content here</div>
    </div>

    css

    #parent {position: relative;}
    #child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
     50%;
    height: 30%;
    margin: auto;
    }

    Equal Top and Bottom Padding

    vertical centering with padding demo

    适用:通用

    代码:

    html

    <div id="parent">
    <div id="child">Content here</div>
    </div>

    css

    #parent {
    padding: 5% 0;
    }
    #child {
    padding: 10% 0;
    }

    Floater Div

    vertical centering with floater div demo

    适用:通用

    代码:

    html

    <div id="parent">
    <div id="floater"></div>
    <div id="child">Content here</div>
    </div>

    css

    #parent {height: 250px;}
    #floater {
    float: left;
    height: 50%;
     100%;
    margin-bottom: -50px;
    }
    #child {
    clear: both;
    height: 100px;
    }

    以上就是六种方法,可以在实际的使用过程中合理选择,参考文章《vertical-centering》。

  • 相关阅读:
    ubuntu 制做samba
    《Programming WPF》翻译 第4章 前言
    《Programming WPF》翻译 第4章 3.绑定到数据列表
    《Programming WPF》翻译 第4章 4.数据源
    《Programming WPF》翻译 第5章 6.触发器
    《Programming WPF》翻译 第4章 2.数据绑定
    《Programming WPF》翻译 第4章 1.不使用数据绑定
    《Programming WPF》翻译 第5章 7.控件模板
    《Programming WPF》翻译 第5章 8.我们进行到哪里了?
    《Programming WPF》翻译 第5章 5.数据模板和样式
  • 原文地址:https://www.cnblogs.com/lxthyme/p/4914097.html
Copyright © 2011-2022 走看看