# 对一个非定长宽的块状元素如何做垂直水平居中

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 284 (opens new window)

Author

回答者: huxiamei (opens new window)

flex 布局

Author

回答者: XJHxjh0118 (opens new window)

定位 .parent{ position: relative; } .child{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

Author

回答者: linlai163 (opens new window)

css position

        .container {
            position: relative;
        }
        .container .item {
            width: 100px;
            height: 50px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }

Author

回答者: shfshanyue (opens new window)

css position

        .container {
            position: relative;
        }
        .container .item {
            width: 100px;
            height: 50px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }

非定宽了，你这个不行呀

Author

回答者: linlai163 (opens new window)

css position

        .container {
            position: relative;
        }
        .container .item {
            width: 100px;
            height: 50px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }

非定宽了，你这个不行呀

面试官说，做题前要好好读题。😭

Author

回答者: jkLennon (opens new window)

https://github.com/shfshanyue/Daily-Question/issues/10

← 10. 响应式布局需要注意哪一些 12. 如何实现左右固定，中间自适应布局 →