css布局【实用】

布局

img 在div中居中

<div>
    <img scr="xxxx"/>
</div>

div{
    width:150px;
    height: 100px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    border:1px solid #000;
}
img {
    width: 50px;
    height: 50px;
}

---

---

---

<div class="banner"></div>

<div class="box">
    <div class="xxx">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

.banner{ 
    width: 800px;
    height: 200px;
    margin:0 auto;
    background: #0c5460;
}

.box{ width: 800px; margin: 0 auto}
.box .xxx{
    display:flex;
    flex-wrap:wrap;
    margin: 0 -3px;
}

.xxx div{
    width: calc( 25% - 6px );
    height: 80px;
    background: #b1dfbb;
    margin: 3px;
}

banner 只截图了一半

左右布局

/* 注释以下全是重点  */
.bigBox::after{
    /* 清除浮动【重点】 */
    content:'';
    display: block;
    clear:both;
}
.box1{
    width: 50%;
    background: palegreen;
    /* 【重点】 */
    float: left;
}
.box2{
    width: 50%;
    background: paleturquoise;
    /* 【重点】 */
    float: left;
}

<div class="bigBox">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</div>

---

左中右布局【 flex 】

两版固定宽度 中间自适应 全部自适应 宽度可以都写成 flex: 1; （数值自行调整）

.box{
    height:50px;
    /* 【重点】 */
    display: flex
}
.left{
    background-color: #b1dfbb;
    /* 【重点】 */
    width: 300px; /* 如果均分 这个可以改为 flex: 1; */
}
.center{
    background-color: yellowgreen;
    /* 【重点】 */
    flex: 1;
}
.right{
    background-color: #b1dfbb;
    /* 【重点】 */
    width: 300px; /* 如果均分 这个可以改为 flex: 1; */
}

<div class='box'>
    <div class='left'>left</div>
    <div class='center'>center</div>
    <div class='right'>right</div>
</div>

---

水平居中

.box{
    width: 200px;
    height: 200px;
    background: aquamarine;
    /* 【重点】 */
    margin: 0 auto;
}

<div class="box">box</div>

---

以下效果都一样 以下效果都一样 以下效果都一样 以下效果都一样 以下效果都一样 以下效果都一样

水平、垂直居中【 translate 】

.box{
    width: 200px;
    height: 200px;
    background: palevioletred;
    /* 【重点】 */
    position: relative;

}
.box span{
    background: aquamarine;
    width: 100px;
    height: 150px;
    /* 【重点】 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

<div class="box">
    <span>123</span>
</div>

水平、垂直居中【 减 margin】

*{
    padding:0;
    margin: 0;
}
.box{
    width: 200px;
    height: 200px;
    background: palevioletred;
    /* 【重点】 */
    position: relative;

}
.box span{
    background: aquamarine;
    width: 100px;
    height: 150px;
    /* 【重点】 */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -75px;
    margin-left: -50px;
}

<div class="box">
    <span>123</span>
</div>

水平、垂直居中【 flexBox 】

.box{
    width: 200px;
    height: 200px;
    background: palevioletred;
    /* 【重点】 */
    display: flex;
    justify-content: center;
    align-items:center;

}
.box span{
    background: aquamarine;
    width: 100px;
    height: 150px;
}

<div class="box">
    <span>123</span>
</div>