如何在中心使用保證金屬性在中心Div元素

我想有一個文本框在中心。我嘗試了下面的代碼。但它並沒有把它放在中心位置。輸出的圖像也可以在下面找到。請通過在我的代碼中指出錯誤來幫助我。如何在中心使用保證金屬性在中心Div元素

<html> 

<head> 

<style> 

#form 
{ 
    margin-top:40%; 
    margin-left:40%; 
} 

</style> 


</head> 

<body> 

<div id="form"> 

    <form method = "post" action = "test.htm" > 
    UserName: <input type="text" name = "username" /> 
    </form> 
</div> 

</body> 

</html>

我從上面的代碼輸出爲：

enter image description here

來源

2014-01-31 abhinav

設置'margin：0 auto;' –

檢查下面的答案。 - @Abhinav – Nitesh

在這裏你去。

WORKING DEMO

CSS的變化：

div#form form { 
    background: none repeat scroll 0 0 #808080; 
    display: block; 
    height: 100px; 
    line-height: 100px; 
    margin: 0 auto; 
    text-align: center; 
    vertical-align: middle; 
    width: 100%; 
}

希望這有助於。

來源

2014-01-31 09:46:07 Nitesh

是的。回答編輯。 - @CTravel – Nitesh

我只想用Margin屬性來做。這是不可能的。爲什麼利潤率50％沒有達到中心？ – abhinav

但50％的是什麼？您需要有一個嵌套的父親關係，它可以將頁邊距限制爲頁面的50％。這完全是一個不同的解決方案。 - @abhinav – Nitesh

爲了得到它垂直和水平居中做到這一點父元素：

position:relative;

那麼類/ ID你想中心：

position:absolute; 
top:0;left:0;bottom:0;right:0; 
margin:auto; 
/*and make sure this element has a width + height: example:!*/ 
width:100px; 
height:100px;

像這樣：Codepen

來源

2014-01-31 09:51:47 Albzi

你可以使用下面的CSS代碼使您的文本框在水平和垂直中心。

#form { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -50px; 
    margin-left: -50px; 
    width: 100px; 
    height: 100px; 
}

來源

2014-01-31 10:02:41

如何在中心使用保證金屬性在中心Div元素

回答

相關問題