zoukankan      html  css  js  c++  java
  • 【整理】如何使元素水平垂直居中

    第一种:已知元素宽、高

    兼容:IE6+

    源码:

    <title>css使元素垂直居中</title>
    <style type="text/css">
    .box{
        width: 200px;
        height: 200px;
        background-color: grey;
        /*css使元素垂直居中*/
        position: relative;
    }
    .box .center{
        width: 100px;
        height: 100px;
        background-color: #B5C8E8;
        /*css使元素垂直居中*/
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -50px;
    }
    </style>
    <div class="box">
        <div class="center"></div>
    </div>

     demo: 

    第二种:元素宽、高未知

    兼容:IE8+

    源码:

    <title>css使元素垂直居中</title>
    <style type="text/css">
    .box{
        width: 200px;
        height: 200px;
        background-color: grey;
        /*css使元素垂直居中*/
        display: table;
    }
    .box .center{
        width: 100px;
        text-align: center;
        background-color: #B5C8E8;
        /*css使元素垂直居中*/
        display: table-cell;
        vertical-align: middle;
        
    }
    </style>
    <div class="box">
        <div class="center">我要居中</div>
    </div>

    demo: 

     要兼容IE6/7,需增加一个div,这个方法比较巧妙,利用了left、top的百分比值是相对于父元素的宽度这点特性

    <title>css使元素垂直居中</title>
    <style type="text/css">
    .box{
        width: 200px;
        height: 200px;
        background-color: grey;
        /*css使元素垂直居中*/
        display: table;
        /*兼容IE6、7*/
        *position: relative;
    }
    .table-cell{
        /*css使元素垂直居中*/
        display: table-cell;
        vertical-align: middle;
        /*兼容IE6、7*/
        *position: absolute;
        *left: 50%;
        *top: 50%;
    }
    .box .center{
        width: 100px;
        text-align: center;
        background-color: #B5C8E8;
        /*css使元素垂直居中*/
        display: table-cell;
        vertical-align: middle;
        /*兼容IE6、7*/
        *position: relative;
        *left: -50%;
        *top: -50%;
    }
    </style>
    <div class="box">
        <div class="table-cell">
           <div class="center">请在IE6/7下查看此demo</div>
        </div>
    </div>

     demo:

      

    第三种:已知元素宽、高,需要借助一个div将上面的空间撑开

    兼容:IE6+

    源码:

    <title>css使元素垂直居中</title>
    <style type="text/css">
    .box{
        width: 200px;
        height: 200px;
        background-color: grey;
        /*css使元素垂直居中*/
    }
    .box .center{
        width: 100px;
        height: 100px;
        background-color: #B5C8E8;
        margin: 0 auto;
        text-align: center;
        /*css使元素垂直居中*/
    }
    .box .floater{
        height: 50%;
        /*设置下外边距为要居中的元素的高度的一半*/
        margin-bottom: -50px;
    }
    </style>
    <div class="box">
        <div class="floater"></div>
        <div class="center"></div>
    </div>

     demo:

    第四种:元素宽、高未知,需要借助另一个元素的高度来实现居中,利用了vertical-align:middle的特性。

    兼容:IE6+

    源码:

    <title>css使元素垂直居中</title>
    <style type="text/css">
    .box{
        width: 200px;
        height: 200px;
        background-color: grey;
        text-align: center;
        /*css使元素垂直居中*/
    }
    .box .center{
        background-color: #B5C8E8;
        /*css使元素垂直居中*/
        display: inline-block;
        vertical-align: middle;
        /*兼容IE6、7*/
        *display: inline;
        *zoom: 1;
    }
    .box .reference{
        display: inline-block;
        vertical-align: middle;
        height: 100%;
        /*兼容IE6、7*/
        *display: inline;
        *zoom: 1;
    }
    </style>
    <div class="box">
        <div class="reference"></div>
        <div class="center">我要居中</div>
    </div>

     demo:

    第五种:元素宽、高未知,设置父元素相对定位,该元素绝对定位,margin: auto;且距离四个方向的距离都为0;如果要居中的元素未设置宽高,这种方法会使该元素铺满它的父元素。

    兼容:IE8+

    源码:

    <title>css使元素垂直居中</title>
    <style type="text/css">
    .box{
        width: 200px;
        height: 200px;
        background-color: grey;
        text-align: center;
        /*css使元素垂直居中*/
        position: relative;
    }
    .box .center{
        width: 100px;
        height: 100px;
        background-color: #B5C8E8;
        /*css使元素垂直居中*/
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
    </style>
    <div class="box">
        <div class="center"></div>
    </div> 

    demo:


    第六种:元素宽、高未知,利用了translate内的百分比是相对于元素本身的宽高这个特性。

    兼容:IE9+

    源码:

    <title>css使元素垂直居中</title>
    <style type="text/css">
    .box{
        width: 200px;
        height: 200px;
        background-color: grey;
        text-align: center;
        /*css使元素垂直居中*/
    }
    .box .center{
        background-color: #B5C8E8;
        /*css使元素垂直居中*/
        position: relative;
        left: 50%;
        top: 50%;
        /*translate内的百分比是相对于元素本身的宽高*/
        transform: translate(-50%, -50%);
    }
    </style>
    <div class="box">
        <div class="center">我要居中</div>
    </div>

    demo:

  • 相关阅读:
    GCD and LCM HDU 4497 数论
    c++ const 修饰变量位置含义
    洛谷 P1017 进制转换
    洛谷 P1029 最大公约数和最小公倍数问题
    Buses and People CodeForces 160E 三维偏序+线段树
    Python学习-第三天-面向对象编程基础
    Python学习-第二天-字符串和常用数据结构
    关于Python学习的一点说明
    Python学习-第一天-函数和模块的使用
    Super Mario HDU 4417 主席树区间查询
  • 原文地址:https://www.cnblogs.com/wangmeijian/p/4922144.html
Copyright © 2011-2022 走看看