一般來說，如果要將元素居中，可能會採取以下方式：

.box{
    width:300px;
    height:300px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-150px;
    margin-top:-150px;
}

如果，要旋轉的是個正方體，用這樣的方式把第一個面固定在中間，
要對其進行旋轉，那麼此時旋轉的中心點就不在最中間。
如以下程式碼：
css:

        *{
            margin: 0;
            padding: 0;
        }
 

        body{
            background-color: black;
        }
        .cube{
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -150px;
            margin-left: -150px;
            transform-style: preserve-3d;
            perspective: 0px;
            animation
 
: RubicsCube 8s linear 0s infinite;
        }
        .cube:hover {
            animation-play-state: paused;
        }
        .cube>div>div{
            float: left;
            width: 90px;
            height: 90px;
            line-height: 90px;
            text-align: center;
            border-radius
 
: 20px;
            margin: 5px;
        }
        .cube>div{
            position: absolute;
            width: 300px;
            height: 300px;
        }
        .f>div{
            background-color: red;
        }
        .b>div{
            background-color: orange;
        }
        .u>div{
            background-color: yellow;
        }
        .d>div{
            background-color: white;
        }
        .l>div{
            background-color: blue;
        }
        .r>div{
            background-color: green;
        }
        .f{
            transform: translateZ(150px);
        }
        .b{
            transform: rotateY(180deg)translateZ(150px);
        }
        .u{
            transform: rotateX(90deg) translateZ(150px);
        }
        .d{
            transform: rotateX(-90deg) translateZ(150px);
        }
        .l{
            transform: rotateY(-90deg) translateZ(150px);
        }
        .r{
            transform: rotateY(90deg) translateZ(150px);
        }
        @keyframes RubicsCube {
            0%{transform: rotateX(0deg) rotateY(0deg)}
            12.5%{transform: rotateX(30deg) rotateY(180deg)}
            25%{transform: rotateX(0deg) rotateY(360deg)}
            37.5%{transform: rotateX(-30deg) rotateY(540deg)}
            50%{transform: rotateX(0deg) rotateY(720deg)}
            62.5%{transform: rotateX(30deg) rotateY(900deg)}
            75%{transform: rotateX(0deg) rotateY(1080deg)}
            87.5%{transform: rotateX(-30deg) rotateY(1260deg)}
            100%{transform: rotateX(0deg) rotateY(1440deg)}
        }

html:

<div class="cube">
    <div class="f">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
    <div class="b">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
    <div class="u">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
    <div class="d">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
    <div class="l">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
    <div class="r">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</div>

這裡沒有給魔方按z軸旋轉，沒有給魔方設定旋轉中心，本來是想達到按y軸旋轉並按x軸上下翻的效果，但是魔方整體會左右飄。如果如果將旋轉中心設定如下就ok了：

transform-origin: 150px 150px 0px;