css排版与布局

一、水平居中

· 行内元素、行内块元素

块级父元素设置 text-align:center

· 块级元素

1.使用margin

· 定宽：

margin:0 auto;

· 不定宽：默认子元素的宽度和父元素一样，这时需要将其转换成行内块/行内元素，给父元素设置 text-align: center;

2.使用定位属性

· 定宽：

#father {
        width: 500px;
        height: 300px;
        position: relative; //子绝父相
}
 
    #son {
        width: 100px;
        height: 100px;
        position: absolute; //子绝父相
        left: 50%; //1.左上角水平居中，可以用百分比
        left: 250px; //2.左上角水平居中，也可以直接写出父元素宽度一半
        margin-left: -50px; //设置为元素宽度的一半，表示向左移动50px
}

· 不定宽：

#father {
        width: 500px;
        height: 300px;
        position: relative; //子绝父相
}
 
    #son {
        height: 100px;
        position: absolute; //子绝父相
        left: 50%; //左上角水平居中
        transform: translateX(-50%); //表示向左移动自身宽度一半
}

3.使用flex

只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;

#father {
        display: flex;
        justify-content: center;
    }

二、垂直居中

· 单行的行内元素

只需要设置单行行内元素的"行高等于父元素的高"即可；

#father {
        width: 500px;
        height: 300px;
    }
 
#son {
        height: 300px;
    }

· 多行的行内元素

#father {
        display: table-cell;
        vertical-align:middle;
    }

· 块级元素

1.使用定位属性

· 定宽：

#father {
        width: 500px;
        height: 300px;
        position: relative; //子绝父相
}
 
#son {
        width: 100px;
        height: 100px;
        position: absolute; //子绝父相
        top: 50%; //左上角垂直居中，可以用百分比
        top: 250px; //左上角垂直居中，也可以直接写出父元素高度一半
        margin-top: -50px; //设置为son元素高度的一半，表示向上移动50px
}

· 不定宽：

#father {
        width: 500px;
        height: 300px;
        position: relative; //子绝父相
}
 
#son {
        height: 100px;
        position: absolute; //子绝父相
        top: 50%; //左上角垂直居中
        transform: translateY(-50%); //表示向上移动自身宽度一半
}

2.使用flex

只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center;

#father {
        display: flex;
        align-items: center;
    }

三、水平垂直居中

· 已知高度和宽度的元素

1.定位+margin

设置父元素为相对定位；给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;

#father {
        width: 500px;
        height: 300px;
        position: relative;
}
 
#son {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
}

2.定位+偏移

设置父元素为相对定位；给子元素设置绝对定位，left: 50%; top: 50%; margin-left:元素宽度的一半; margin-top:元素高度的一半

#father {
        width: 500px;
        height: 300px;
        position: relative;
}

#son {
        width: 100px;
        height: 100px;
        position: absolute;
		left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -50px;
}

· 未知高度和宽度的元素

1.使用定位属性

设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

#father {
        width: 500px;
        height: 300px;
        position: relative;
}
#son {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
}

2.使用flex

设置父元素为flex定位，justify-content: center; align-items: center;

#father {
        width: 500px;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
}

四、两列布局——左定宽，右自适应

1.通过float

left设置 float:left

right设置 margin-left:左边盒子宽度

2.通过float+BFC

left设置 float:left

right设置 overflow:auto，触发BFC

3.通过定位

container设置 position:relative

left设置 position:absolute

right设置 margin-left:左边盒子宽度

4.通过flex

container设置 display:flex

left设置宽度

right设置 flex:1

flex属性的默认值为：0 1 auto （不放大会缩小）

flex为none：0 0 auto （不放大也不缩小）

flex为auto：1 1 auto （放大且缩小）

flex为1：1 1 0%（不关心内容, 只是把空间等比收缩和放大）

五、三列布局——左右定宽，中间自适应

1.通过float

left设置 float:left，设置宽度

right设置 float:right，设置宽度

center设置 margin:0 左右盒子宽度

2.通过定位

container设置 position:relative

left设置 position:absolute，设置left:0

right设置 position:absolute，设置right:0

center设置 margin:0 左右盒子宽

3.通过flex

container设置 display:flex

left设置宽度

right设置宽度

center设置 flex:1

flex属性的默认值为：0 1 auto （不放大会缩小）

flex为none：0 0 auto （不放大也不缩小）

flex为auto：1 1 auto （放大且缩小）

flex为1：1 1 0%（不关心内容, 只是把空间等比收缩和放大）

六、三行布局——上下定高，中间自适应

1.通过flex

father设置 flex布局，设置主轴为纵轴，设置高度100%

top、bottom设置 高度，如100px

center设置 flex：1

<style>
        /* 解决不能占满屏幕问题 */
        html,body {
            height: 100%;
            padding: 0;
            margin: 0;
        }

        .father {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .top,
        .bottom {
            height: 100px;
            background-color: #000000;
            color: white;
        }

        .center {
            flex: 1;
            background-color: #ffc0cb;
        }
</style>

<div class="father">
    <div class="top">head</div>
    <div class="center">main</div>
    <div class="bottom">foot</div>
</div>

2.通过position

father设置 相对定位

top、bottom设置 绝对定位，设置高度，如100px、200px

center设置 绝对定位，设置top和bottom偏移量（分别是top元素和bottom元素高度）

    <style>
        body,html{
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .father {
            height: 100%;
            position: relative;
        }

        .top {
            position: absolute;
            top: 0;
            height: 200px;
            width: 100%;
            background: red;
        }

        .center {
            position: absolute;
            top: 200px;
            bottom: 100px;
            /* min-height: 100%; 设置了center的高度会溢出屏幕*/  
            width: 100%;
            background: #0ff;
        }

        .bottom {
            position: absolute;
            bottom: 0;
            height: 100px;
            width: 100%;
            background: yellow;
        }
    </style>
    <div class="father">
        <div class="top">top</div>
        <div class="center">center</div>
        <div class="bottom">bottom</div>
    </div>

七、其他

1.如何使元素布满整个屏幕高度

html, body {
    height: 100%; //1.将html、body元素撑满整个屏幕
    margin: 0px;
    padding: 0px;
}
#main {
    height: 100%; //2.再将需要占满整个高度的main元素设置height:100%
}