AY H5笔记11-垂直居中

时间：2020年10月09日 | 作者 : aaronyang | 分类 : web前端 | 浏览: 1084次 | 评论 0 人

插一个上节课的vertical-alignment:middle无效的问题

比如设置，水平居中有效

    <div style="background-color: pink; text-align: center;">
        ay博客
    </div>

继续设置，vertical-align:middle是无效的

    <div style="background-color: pink; text-align: center;vertical-align: middle;">
        ay博客
    </div>

vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

如果给一个表格的td加一个vertical-align:middle的样式，表格里面的内容会垂直居中，同样的如果给一个vertical-align:bottom就会底部对齐，如果给一个vertical-align:top就会顶部对齐。

定义个样式

 .div1 {
            border: 1px solid #000;
            height: 20px;
            width: 20px;
        }

代码

    <div style="border: 0 solid #000;">
        <div class="div1" style="display: inline-block;vertical-align: middle;">a</div>
        <div class="div1" style="display: inline-block;">b<div>
    </div>

刪除下面的一些div代码，后效果如下

当a加了一个vertical-align:middle样式之后，b的底部（基线）就会对齐a的中间位置

调整代码，让div的高度明显点，把div1的height设置60，然后a和b都加了一个vertical-align:middle样式

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体</title>
    <style>
        div {
            height: 100px;
            width: 600px;
        }

        .div1 {
            height: 60px;
            width: 20px;
        }

    </style>

<body>
    <div style="background-color: pink; text-align: center;vertical-align: middle;">
        ay博客
    </div>
    <div style="background: yellow;">
        <div class="div1" style="display: inline-block;vertical-align: middle;background: green;">a</div>
        <div class="div1" style="display: inline-block;vertical-align: middle;background: yellowgreen;">b<div>
  
    </div>
</body>

</html>

====================www.ayjs.net 杨洋 wpfui.com ayui ay aaronyang=======请不要转载谢谢了。=========

那么就互相对齐了对方的中间位置，也就是它们在垂直方向上的中线对齐了，如下图：

两个绿色方块并不在黄色方块内垂直居中

我们先垂直居中a，注释掉b

增加一个辅助空div

      .divhelp {
            height: 100%;
            width: 0;
            display: inline-block;
            vertical-align: middle;
        }

已经居中了

因为有个100%高度的div，其他div以100%的div为基线，全都居中

修改下写法

     .parent::after {
            height: 100%;
            content: '';
            display: inline-block;
            vertical-align: middle;
            overflow:hidden;
        }

 <div class="parent" style="background: yellow;">
        <div class="div1" style="display: inline-block;vertical-align: middle;background: green;">a</div>
        <!-- <div class="div1" style="display: inline-block;vertical-align: middle;background: yellowgreen;">b<div> -->
    </div>

效果图同上。

如何让内部也垂直居中，把需要居中的父元素设置这个样式

内部文字水平居中，绿色方块水平居中

父元素使用line-height等于height，子元素能垂直居中了。但是里面的内容

    <div style="height: 120px;line-height: 120px;background-color: teal;">
        <div style="width:100px;height:60px;display: inline-block;vertical-align: middle;background: rgb(102, 212, 102);">
    b
        </div>
    </div>

文字貌似跑出去了，只要里面的内容也设置line-height等于height

也居中了

绝对对齐居中写法，适合登录页

        .v3 {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

居中后，内部垂直居中

    <div class="v3 parent" style="width:100px;height:60px;background: rgb(102, 212, 102);text-align: center">
        b
    </div>

使用table-cell方式

    <table style="width: 300px;height: 120px;background: rgb(209, 144, 206);">
        <tr>
            <td style="vertical-align: middle;text-align: center">
                <div class="parent" style="width:140px;height:60px;background: rgb(102, 128, 212);">
                    www.ayjs.net
                </div>
            </td>
        </tr>
    </table>

发现td的text-align: center无效，因为该属性对block无效

设置显示方式，然后成功

display: inline-block

inline-block元素把自己变成特殊的inline元素，对于相邻的元素来说表现出inline的特点，允许空格。对于内部元素来说表现出block元素的特点，可以设置高度和宽度。

空格是两个标签中存在换行符or制表符or空格符（其实就是缩进）的原因生产的，只需要给设置了inline-block属性的父元素设置font-size:0,就可以使标签中的空格失去宽度

同理我们知道了table-cell的特殊性，他对浮动元素无效

未生效的样子

    <div style="height: 120px;background-color: teal;">
        <div
            style="width:100px;height:60px;display: inline-block;vertical-align: middle;background: rgb(102, 212, 102);">
            tablecell方式
        </div>
    </div>

    <div style="width:200px;height: 120px;background-color: teal;display:table-cell; vertical-align: middle;text-align: center;">
        <div
            style="width:100px;height:60px;display: inline-block;vertical-align: middle;background: rgb(102, 212, 102);display:table-cell; text-align: center;"  >
            tablecell方式
        </div>
    </div>

你也发现了，无法水平居中

对于父元素和子元素的宽度都确定的情况，适合通过display:table-cell和margin-left实现CSS水平居中。

使用时，父元素display:table-cell，子元素给剩余宽度一半的margin-left。

（200-100）/2 =50

继续修改：

    <div style="width:200px;height: 120px;background-color: teal;display:table-cell; vertical-align: middle;">
        <div
            style="width:100px;height:60px;vertical-align: middle;background: rgb(102, 212, 102);margin-left: 50px;"  >
            tablecell方式
        </div>
    </div>