CSS

关于div在大div中的垂直居中的几种方式

作者:本站 2017-09-01 浏览:303 标签: css    

html:<div class="parent">     <div class="child"></div

html:

<div class="parent">
    <div class="child"></div>
</div> 

<style>
    /*第一种方法*/
    /*.parent {*/
        /*width:500px;*/
        /*height:500px;*/
        /*border:2px solid #000;*/
        /*position:relative;*/
    /*}*/
    /*.child {*/
        /*width:230px;*/
        /*height:200px;*/
        /*margin: 0 auto;*/
        /*margin: auto;*/
        /*position: absolute;*/
        /*top: 0; left: 0; bottom: 0; right: 0;*/
        /*background-color: red;*/
    /*}*/

    /*第二种方法*/
    /*.parent {*/
        /*width:800px;*/
        /*height:500px;*/
        /*border:2px solid #000;*/
        /*display:table-cell;*/
        /*vertical-align:middle;*/
        /*text-align: center;*/
    /*}*/
    /*.child {*/
        /*width:200px;*/
        /*height:200px;*/
        /*display:inline-block;*/
        /*background-color: red;*/
    /*}*/
    /*第三种方法(不支持此写法,兼容问题)*/
    /*.parent {*/
        /*width:800px;*/
        /*height:500px;*/
        /*border:2px solid #000;*/
        /*display:flex;*/
        /*justify-content:center;*/
        /*align-items:center;*/
    /*}*/
    /*.child {*/
        /*width:200px;*/
        /*height:200px;*/
        /*background-color: red;*/
    /*}*/
    /*第四种方法(支持)*/
    .parent {
        width:800px;
        height:500px;
        border:2px solid #000;
        position:relative;
    }
    .child {
        width:300px;
        height:200px;
        margin:auto;
        position:absolute;/*设定水平和垂直偏移父元素的50%,再根据实际长度将子元素上左挪回一半大小*/
        left:50%;
        top:50%;
        margin-left: -150px;
        margin-top:-100px;
        background-color: red;
    }
</style>



    

  • 0

  • 0

  • 1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.如有文章有版权争议,请给我们留言或者邮件告知我们,邮箱地址:028mw@126.com。