未知宽高元素居中

发表于 更新于 分类于 Disqus： 本文字数： 396 阅读时长 ≈ 1 分钟

有两种方法

  1. 使用flex

    父元素：

    1
    2
    3
    4
    5
    6
    7
    8
    width: 100vw;
    height: 500px;
    background: skyblue;
    /* position: relative; */
    display: flex;
    /* align-content: center; */
    justify-content: center;
    align-items: center;

    子元素不用设置

  2. 使用transform

    父元素：

    1
    2
    3
    4
    width: 100vw;
    height: 500px;
    background: skyblue;
    position: relative;

    子元素：

    1
    2
    3
    4
    5
    6
    7
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    transform: translate(-50%, -50%);
    word-break: break-all;
    background-color: deepskyblue;