css3 - css垂直水平居中？

Question

如何实现B在A中，垂直和水平方向都居中？ 代码如下： {代码...}

阿神 · Answer

兩種方法：

第一種：

#A {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: green;
        }

        #B {
            position: absolute;
            max-width: 300px;
            max-height: 300px;
            background-color: blue;
            /* add */
            margin:auto;
            left:0;
            right:0;
            top:0;
            bottom:0;
        }

第二種：

#A {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: green;
        }

        #B {
            position: absolute;
            max-width: 300px;
            max-height: 300px;
            background-color: blue;
            /* add */
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
        }

PHP中文网 · Answer

雷雷

http://jsfiddle.net/7uakz7p1/

阿神 · Answer

今天剛學到的一種比較簡單的方法：父容器設置display: flex; 要居中的子元素設置margin: auto;即可。
本例中

#A {
        position: relative;
        width: 500px;
        height: 500px;
        background-color: green;
        /*add*/
        display: flex;
        display: -webkit-flex;
    }
#B {
        /*position: absolute;*/
        max-width: 300px;
        max-height: 300px;
        background-color: blue;
        /*add*/
        margin: auto;
    }

ps. IE下好像有問題...

PHPz · Answer

天蓬老师 · Answer

正好發現一個網站，給了好多解決方案 Centering in CSS: A Complete Guide

高洛峰 · Answer

http://jsfiddle.net/nbayw7ea/

阿神 · Answer

http://css-tricks.com/centering-css-complete-guide/