CSS布局

水平居中

1.text-align：center；

盒子中的文字内容水平对齐。

可以水平居中块级元素中的行内元素，如inline、inline-block。

2.margin：0 auto；

可以居中已知宽度的块级元素，无宽度不可使用此方法。

垂直对齐

1.vertical-align：baseline |top |middle |bottom

vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。

图片与文字基线对齐：vertical-align：baseline

垂直居中：vertical-align：middle

顶部对齐：vertical-align：top

底线对齐：vertical-align：bottom

*除去图片空白间隙 / 仅供参考，若有错误，请指出，谢谢~ /

img {
    vertical-align: top;
    border: 0;
}
或将图片转为块级元素即可
img {
    display: block;
}

左右布局与左中右布局

常用float浮动和position定位进行布局，具体请参考我的上一篇随笔，CSS的定位机制。

绝对居中

垂直居中+水平居中

给父元素加三行代码

display:flex;
align-items:center;
justify-content:center;

display:flex -- 弹性盒

注：父元素的高度由子元素撑开，给父元素视口高度需给 -- height:100vh

文本相关的布局知识

文本两端对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 600px;
        border: 1px solid red;
        font-size: 20px;
    }
    p {
        text-align: justify;/*段落文字对齐*/
    }
    span {
        border: 1px solid blue;
        display: inline-block;
        width: 5em;
        text-align: justify;
        height: 20px;
        line-height: 20px;
        overflow: hidden;
    }
    span::after {
        content: '';
        display: inline-block;
        width: 100%;
        border: 1px solid yellow;
    }
    </style>
</head>
<body>
    <div>
        <span>姓名</span><br />
        <span>联系方式</span>
        <p>联系方式联系方式联系方式联系方式联系方式联系wuwiakiskl方式联系方式联系方式联系方式联系方式联系方式联系方式联qwwimsxu系方式联系方式联系方式联系方式联系方式联系方式联系方式联系方式联系方式联系方式联系方式</p>
    </div>
</body>
</html>

文本不换行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 300px;
        height: 100px;
        border: 1px solid red;
        white-space:nowrap;/*不换行*/
    }
    </style>
</head>
<body>
    <div>博客博客博客博客博客博客博客博客博客博客博客博客博客博客博客博客博客博客博客博客博客博客博客博客博客博客博客博客博客博客博客博客博客博客博客博客博客博客博客</div>
</body>
</html>

文本中断并换行：

word-break：break-all;

文本不换行，溢出省略：

white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;

多行文本换行，溢出省略：

display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;