让div垂直水平居中的几种方法

r囧r小猫 2021-11-10 06:04 366阅读 0赞

参考文档：[https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/92][https_github.com_Advanced-Frontend_Daily-Interview-Question_issues_92]

不多说，直接上代码（本地运行的时候去掉任意一段方法的注释即可）：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style> /*方法1：*/ /*.parent{display: flex; align-items: center; justify-content: center;}*/ /*方法2：*/ /*.parent{display: flex;}*/ /*.child{margin: auto;}*/ /*方法3：*/ /*.parent{position: relative;}!*parent的position可以是absolute/relative/fixed*!*/ /*.child{position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;}*/ /*方法4：*/ /*.parent{position: relative;}!*parent的position可以是absolute/relative/fixed*!*/ /*.child{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}*/ /*方法5（只能在子元素有固定高度宽度时使用）：*/ /*.parent{position: relative;}!*parent的position可以是absolute/relative/fixed*!*/ /*以下三种子元素的样式是等价的*/ /*.child{position: absolute; top: calc(50% - 25px); left: calc(50% - 25px);}*/ /*.child{position: absolute; top: 50%; left: 50%; transform: translate(-25px, -25px);}*/ /*.child{position: absolute; top: 50%; left: 50%; margin-top: -25px; margin-left: -25px;}*/ /*方法6（只能在父元素有固定高度时使用）：*/ /*.parent{text-align: center; line-height: 200px;}*/ /*.child{display: inline-block; vertical-align: middle;}*/ </style>
    </head>
    <body>
    <div class="parent" style="width: 200px; height: 200px; background-color: burlywood;">
        <div class="child" style="width: 50px; height: 50px; background-color: gray;"></div>
    </div>
    </body>
    <script> </script>
    </html>

[https_github.com_Advanced-Frontend_Daily-Interview-Question_issues_92]: https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/92