zoukankan      html  css  js  c++  java
  • 垂直居中的方法

    题目:垂直居中的方法

      

    (1)table-cell(未脱离文档流的)

    设置父元素的display:table-cell,并且vertical-align:middle,这样子元素可以实现垂直居中

    css:
    div{
     300px;
    height: 300px;
    border: 3px solid #555;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    }
    img{
    vertical-align: middle;
    }


    (2)margin:auto法
    css:
    div{
     400px;
    height: 400px;
    position: relative;
    border: 1px solid #465468;
    }
    img{
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    }
    html:
    <div>
    <img src="mm.jpg">
    </div>

    定位为上下左右为0,margin:0可以实现脱离文档流的居中.

    (3)margin负值法

    .container{
     500px;
    height: 400px;
    border: 2px solid #379;
    position: relative;
    }
    .inner{
     480px;
    height: 380px;
    background-color: #746;
    position: absolute;
    top: 50%;
    left: 50%;

    margin-top: -190px; /*height的一半*/

    margin-left: -240px; /*width的一半*/

    }

    补充:其实这里也可以将marin-top和margin-left负值替换成,
    transform:translateX(-50%)和transform:translateY(-50%)

    (4)利用flex

    将父元素设置为display:flex,并且设置align-items:center;justify-content:center;

    css:
    .container{
    300px;
    height: 200px;
    border: 3px solid #546461;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    }
    .inner{
    border: 3px solid #458761;
    padding: 20px;
    }
  • 相关阅读:
    IOC(控制反转)
    JQuery中的DOM操作
    【JQuery的选择器】
    JPA基本注解介绍
    JPA使用的HelloWorld
    JPA的介绍
    JQuery简介及HelloWorld
    SpringMvc处理post请求乱码的filter
    Sping3.0版本+Quartz完成定时任务
    CentOS下安装Subversion (SVN)
  • 原文地址:https://www.cnblogs.com/zqlym/p/13720913.html
Copyright © 2011-2022 走看看