08
2020
04

如何使元素垂直水平居中?

答:


a、知道具体宽高:


父级定位,子级定位,宽高300px


.container {


    position: absolute;


    left: calc(50% - 150px);


    top: calc(50% - 150px);


    width: 300px;


    height: 300px;


    border: 1px solid red;


}


或者


.container {


    position: absolute;


    left: calc(50% - 150px);


    top: calc(50% - 150px);


    width: 300px;


    height: 300px;


    border: 1px solid red;


}


 


 


b、不知道具体宽高:


.container {


    position: absolute;


    top: 50%;


    left: 50%;


transform: translate(-50%, -50%); // 自身宽度和高度的一半    


border: 1px solid red;


}


或者单位vh


.container {


    width: 300px;


    margin: 50vh auto 0;


    transform: translateY(-50%);


    border: 1px solid red;


}


C、Flex


.container {


    display: flex;


    height: 100px;


}


.inner {


    margin: auto;


}


或者


.container {


    display: flex;


    justify-content: center;


    align-items: center;


    height: 100vh;


}


D、Table


.container {


    display: table;         /* 让div以表格的形式渲染 */


    width: 100%;


    border: 1px solid red;


}


.inner {


    display: table-cell;    /* 让子元素以表格的单元格形式渲染 */


    text-align: center;


    vertical-align: middle;


}

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。