[ css ] 普普通通 水平居中

[ouuz]

第 3 天 小张同学昨晚终于把html标签都看了一遍，她兴致冲冲地准备给自己的东西加上好看的背景色，这时候路过的蟹老板说道：“你先实现个水平垂直居中吧，别整这些花里胡哨的东西，背景色再好看都莫得用”。请你帮帮委屈的小张同学，
实现蟹老板一分钟写出来的水平居中，效果如图

[deximy]

    <h1 id="text">Hello, World!</h1>
    <div>
        我就不用红色背景(╯▔皿▔)╯
    </div>
    <style>
        h1
        {
            text-align: center;
        }
        div
        {
            position: absolute;
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align:center;
            white-space: nowrap;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #66ccff;
        }
    </style>

[ouuz]

    <h1 id="text">Hello, World!</h1>
    <div>
        我就不用红色背景(╯▔皿▔)╯
    </div>
    <style>
        h1
        {
            text-align: center;
        }
        div
        {
            position: absolute;
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align:center;
            white-space: nowrap;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #66ccff;
        }
    </style>

完成得很不错了捏！但是有个小小的问题 QAQ
如果水平垂直居中的div里边的文字很多的话，那你设置的 white-space: nowrap;会让字在水平方向超出div
如果删除这个属性，允许换行的话，使用height和line-height值相同的方式，就会导致字在垂直方向上超出div
因为line-height是行高，当你的文字过多时，不换行则会导致文字呈多行出现，进而导致垂直溢出，事实上使用 height 和 line-height等值使居中方法的时候，可以不设置height 直接让内容去撑开高度即可
但本题对div有宽高限制的要求，所以不太🆗噢
不过已经算很不错的啦！继续加油嗷|ω･)و

[deximy]

    <h1 id="text">Hello, World!</h1>
    <div>
        我就不用红色背景(╯▔皿▔)╯
    </div>
    <style>
        h1
        {
            text-align: center;
        }
        div
        {
            position: absolute;
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align:center;
            white-space: nowrap;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #66ccff;
        }
    </style>

完成得很不错了捏！但是有个小小的问题 QAQ
如果水平垂直居中的div里边的文字很多的话，那你设置的 white-space: nowrap;会让字在水平方向超出div
如果删除这个属性，允许换行的话，使用height和line-height值相同的方式，就会导致字在垂直方向上超出div
因为line-height是行高，当你的文字过多时，不换行则会导致文字呈多行出现，进而导致垂直溢出，事实上使用 height 和 line-height等值使居中方法的时候，可以不设置height 直接让内容去撑开高度即可
但本题对div有宽高限制的要求，所以不太🆗噢
不过已经算很不错的啦！继续加油嗷|ω･)و

那这样行不行（吃手手

    div
    {
        position: absolute;
        width: 200px;
        height: 200px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #66ccff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
    }

[ouuz]

@deximy 可以了捏！恭喜解锁flex布局(◍˃̶ᗜ˂̶◍)✩