Flexbox Not Centering Vertically in IE

前端 未结 10 677
自闭症患者
自闭症患者 2020-12-04 08:15

I have a simple web page with some Lipsum content that is centered on the page. The page works fine in Chrome and Firefox. If I reduce the size of the window, the content fi

10条回答
  •  难免孤独
    2020-12-04 08:35

    i have updated both fiddles. i hope it will make your work done.

    centering

        html, body
    {
        height: 100%;
        width: 100%;
    }
    
    body
    {
        margin: 0;
    }
    
    .outer
    {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .inner
    {
        width: 80%;
        margin: 0 auto;
    }
    

    center and scroll

    html, body
        {
            height: 100%;
            width: 100%;
        }
    
        body
        {
            margin: 0;
            display:flex;
        }
    
        .outer
        {
            min-width: 100%;  
            display: flex;
            align-items: center;
            justify-content: center;
        }
    
        .inner
        {
            width: 80%;
        margin-top:40px;
        margin: 0 auto;
        }
    

提交回复
热议问题