flex 宽高相等文字居中对齐

作者: 9682f4e55d71 | 来源:发表于2019-01-04 12:11 被阅读12次

flex 宽高相等文字居中对齐
[小结]css垂直居中方式小结
CSS 垂直居中的几种实现思路方法
flex 布局文字对齐
html元素居中
面试题 -- 水平垂直居中
html，css基础知识
css简单样式-1
CSS居中
css –“left：50％,transform：transla

效果图

flex_width_eq_height.png


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            /* height: 300px; */
            /* for demo purposes */
            color: white;
        }

        flex-container {
            display: flex;
            /* primary flex container */
            flex-direction: row;
            /* horizontal alignment of flex items
                                      (default value; can be omitted) */
            align-items: stretch;
            /* will apply equal heights to flex items
                                      (default value; can be omitted) */
            height: 100%;
            width: 100%;
        }

        flex-item {
            display: flex;
            /* nested flex container */
            flex-direction: column;
            /* vertical alignment of flex items */
            justify-content: center;
            /* center flex items vertically */
            align-items: center;
            /* center flex items horizontally */
        }

        flex-item:first-child {
            flex: 3;
            /* consume 3x more free space than sibling */
            background-color: #a333c8;
        }

        flex-item:last-child {
            flex: 1;
            background-color: #db2828;
        }
        flex-item:last-child #bg{
            background-color: black;
            display: flex;
            width: 100%;
            height: 0;
            padding-top: 100%;
            align-items: stretch;
        }
        #text{
            position: absolute;
            border: 1px solid green;
        }
    </style>

</head>

<body>
    <flex-container>
        <flex-item>
            <!-- also flex container -->
            <p>Text Text Text</p>
            <p>Text Text Text</p>
            <!-- <p>Text Text Text</p> -->
            <p>Text Text Text</p>
        </flex-item>
        <flex-item>
            <!-- also flex container -->
            <div id='bg'></div>
            <div id='text'>Forward</div>
        </flex-item>
    </flex-container>
</body>

</html>