子盒子水平垂直居中的小技巧

1.这种方法只适合在父盒子只有一个子盒子的时候使用

代码如下:

<style>
    .content{
        position: relative;
        width:300px;
        height:300px;
        margin:0 auto;
        background-color: orange;
    }
    .box{
        position: absolute;
        height:100px;
        width:60%;
        top:0;
        right:0;
        bottom:0;
        left:0;
        background-color: white;
        margin:auto; //以前就知道用margin:0 auto;做水平居中,原来margin:auto配合绝对定位还能这么玩
    }
style>
<body>
<div class="content">
    <div class="box">适合父盒子只有一个子盒子的情况div>
div>

你可能感兴趣的:(css)