用CSS3在頁面中設置內容

Question

<div style="width: 100%; position:fixed; display: block;" class="parent"> 
    <div class="child" style="width: 100%; height: 30px; ">mid</div> 
</div> 

我打算使用css在頁面中間設置'child'類的div。 父div的位置將被修復。 我該怎麼辦？

Answer 1

要定位在屏幕中心的元素：

/* Staple class for V and H centered element */ 
.vertical-and-horizontally-centered-element { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    /* support for cross browser compatibility */ 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
} 

要在元件的中心內居中文本使用text-align: center。之後，我們放在一起所有的代碼，你會得到以下結果：

.parent { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: fixed; 
 
    display: block; 
 
} 
 

 
.child { 
 
    height: 30px; 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    text-align: center; 
 
    transform: translate(-50%, -50%); 
 
    /* support for cross browser compatibility */ 
 
    -webkit-transform: translate(-50%, -50%); 
 
    -moz-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    -o-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
}

<div class="parent"> 
 
    <div class="child">mid</div> 
 
</div>

另一個意見，請將您的內聯CSS自己的CSS文件，除非你必須內嵌保持它的具體原因。 ..我的兩美分:-)

讓我知道如果您有任何問題在下面的評論。

Answer 2

在這裏被寄託都居中：https://jsfiddle.net/16q2xr8k/5/

.parent{background-color: lightblue;} 
.child{ 
    background-color: lightgreen; 
    text-align: center; 
    margin-left: 50%; 

    position: relative; 
    top: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
}