02CSS

居中

• 元素内容水平居中 -- text-align: center;
• 块级元素水平居中 -- margin: 0 auto;
• 一行文字垂直居中 -- 行高等于高 line-height: number;
• 多行内容垂直居中 -- 调整 margin、padding

子元素在父元素中水平居中

<div class="centerParBox">
    <div class="centerChiBox">子元素</div>
</div>

子元素宽高已知

1. margin pc端常用

.centerParBox {
   width: 300px;
   height: 300px;
   border: 1px solid pink; 

   /* 1.margin */
   overflow: hidden;
}

.centerChiBox {
    width: 100px;
    height: 100px;
    border: 1px solid lightblue;

    /* 1.margin */
    margin: 100px;
}

2. padding

.centerParBox {
    width: 300px;
    height: 300px;
    border: 1px solid pink; 

    /* 2.padding */
    box-sizing: border-box;
    padding: 100px;
}

.centerChiBox {
    width: 100px;
    height: 100px;
    border: 1px solid lightblue;
}

3. flex moblie端常用

 .centerParBox {
    width: 300px;
    height: 300px;
    border: 1px solid pink; 

    /* 3.flex */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.centerChiBox {
    width: 100px;
    height: 100px;
    border: 1px solid lightblue;
}

4. position 父减子的一半

5. position 子的一半 pc端常用

.centerParBox {
    width: 300px;
    height: 300px;
    border: 1px solid pink; 

    /* 4&5.position */
    position: relative;
}

.centerChiBox {
    width: 100px;
    height: 100px;
    border: 1px solid lightblue;

    /* 4.position */
    /* position: absolute;
    top: 100px; 
    left: 100px; */

    /* 5.position */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px; /* 子的一半 */
    margin-left: -50px;
}

6. table-cell

.centerParBox {
    width: 300px;
    height: 300px;
    border: 1px solid pink; 

    /* 6.table-cell */
    display: table-cell;
    vertical-align: middle;
    /* 或者 */
    text-align: center; 
}

.centerChiBox {
    width: 100px;
    height: 100px;
    border: 1px solid lightblue;

    /* 6.table-cell */
    /* margin: 0 auto; */
    /* 或者 */ 
    display: inline-block;
}

7. transform

.centerParBox {
    width: 300px;
    height: 300px;
    border: 1px solid pink; 
}

.centerChiBox {
    width: 100px;
    height: 100px;
    border: 1px solid lightblue;

    /* 7.transfrom */
    transform: translate(100px, 100px)
}

子元素宽高未知

flex moblie端常用

.centerParBox {
    width: 300px;
    height: 300px;
    border: 1px solid pink; 

    /* 1.flex */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.centerChiBox {
    border: 1px solid lightblue;
}

position + transform pc端常用

.centerParBox {
    width: 300px;
    height: 300px;
    border: 1px solid pink; 

    /* 2. position + transfrom */
    position: relative;
}

.centerChiBox {
    border: 1px solid lightblue;

    /* 2. position + transfrom */
    position: absolute;
    top: 50%;  /* 父元素的50% */
    left: 50%;
    transform: translate(-50%, -50%);  /* 子元素的50% */
}

三栏布局

• 中间两侧有宽度，固定两侧，中间随页面缩放

左中右顺序

<div class="threeColBox">
    <div class="left"></div>
    <div class="center">中间内容</div>
    <div class="right"></div>
</div>

<style>
    .left{
        background-color: lightblue;
    }
    .right{
        background-color: lightpink;
    }
    .center{
        background-color: #7d7df1;
    }
    .center{
        height: 50px;
    }
    .left,.right{
        width: 200px;
        height: 50px;
    }
</style>

flex

/* 1. flex */
.left,.right {
    flex-shrink: 0;  /* 不缩小  */
}
.center {
    flex-grow: 1;
}
.threeColBox {
    display: flex;
}

position

.left {
    position: absolute;
    top: 0;
    left: 0;
}
.right {
   position: absolute; 
   top: 0;
   right: 0;
}
.center {
    margin: 0 200px;
}
.threeColBox {
    position: relative;
}

左右中顺序

<div class="threeColBox">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">中间内容</div>
</div>

float

.left {
    float: left;
}
.right {
    float: right;
}
.center {
    margin: 0 200px;
}
.threeColBox {}

中左右顺序

圣杯法

• threeColBox 用 padding 撑开左右
• 三列浮动 + 负margin移动 + relative移动

<style>
    .left {
        width: 200px;
        height: 50px;
        background-color: lightsalmon;

        float: left;
        margin-left: -100%; /* 对其中间内容的左边 */
        position: relative;
        left: -200px;
    }
    .right {
        width: 200px;
        height: 50px;
        background-color: lightskyblue;

        float: left;
        margin-left: -200px; /* 对其中间内容的右边 */
        position: relative;
        right: -200px;
    }
    .center {
        background-color: lightpink;
        height: 50px;

        float: left;
        width: 100%;
    }
    .threeColBox {
        padding: 0 200px;
        overflow: hidden;
    }
</style>

<div class="threeColBox">
    <div class="center">圣杯法（优先加载中间），threeColBox 用 padding 撑开左右</div>
    <div class="left"></div>
    <div class="right"></div>
</div>

双飞翼法

• 中间两层，里面的center用margin撑开
• 三列浮动 + 负margin移动

<style>
    #middleBox {
        width: 100%;
        height: 200px;
        background-color: lightpink;

        float: left;
    }
    .center {
        margin: 0 200px;
    }
    .left {
        width: 200px;
        height: 200px;
        background-color: lightsalmon;

        float: left;
        margin-left: -100%;
    }
    .right {
        width: 200px;
        height: 200px;
        background-color: lightskyblue;

        float: left;
        margin-left: -200px;
    }

</style>
<div class="threeColBox">
    <div id="middleBox">
        <div class="center">双飞翼法（优先加载中间）</div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>