居中在骷髏div

對於我的一個項目，我第一次使用骨架鍋爐板。而且我正在尋找在骷髏中集中div的最佳做法，而不會抨擊Skeleton的規則。居中在骷髏div

目前，我有以下結構的登錄頁面。

HTML：

<div class="container"> 
<div class="sixteen columns vertical-offset-by-one"> 
<div id="loginBox"> 
<img src="images/yeditepeLogo.png" alt="Yeditepe Logo" class="yeditepeLogo" /> 
<form action="" id="loginForm"> 
<input type="text" name="username" required placeholder="username" class="loginTextField"> 
<input type="password" name="password" required placeholder="password" class="loginTextField"> 
<input type="submit" value="Log In" class="loginButton" /> 
</form> 
</div><!-- loginBox --> 

</div><!-- sixteen columns --> 

<div class="sixteen columns"> 
<p align="center"><a href="registration.html" target="_blank">Click here to register</a></p> 
</div> 
</div><!-- container -->

CSS：

#loginBox, #registrationBox { 
    width: 470px; 
    height: 450px; 
    background-color: white; 
    left: 245px; */ 
    top: 20px; */ 
    position: relative; 
    margin: 0px auto; } 

#registrationBox { 
    height: 500px; } 

.yeditepeLogo { 
    position: relative; 
    left: 40px; 
    top: 33px; } 

#loginForm, #registrationForm { 
    position: relative; 
    top: 45px; } 

.loginTextField, .registrationTextField { 
    position: relative; 
    height: 40px; 
    width: 388px; 
    left: 40px; 
    border-color: #dedede; 
    border-style: solid; 
    border-width: 1px; 
    margin-bottom: 10px; 
    text-align: left; 
    font-size: 18px; 
    text-indent: 10px; 
    -webkit-appearance: none; } 

.loginTextField:focus, .registrationTextField:focus { 
    outline-color: #ff9800; 
    outline-style: solid; 
    outline-width: 1px; 
    border-color: white; } 

.loginTextField:nth-child(2), .registrationTextField:nth-child(3) { 
    margin-bottom: 40px; } 

.loginButton, .registrationButton { 
    background-color: #77a942; 
    position: relative; 
    border: none; 
    width: 390px; 
    height: 60px; 
    left: 40px; 
    color: white; 
    font-size: 24px; 
    text-align: center; 
    opacity: 0.8; } 
    .loginButton:hover, .registrationButton:hover { 
    opacity: 1; }

正如你所看到的，#loginBox有一個固定的寬度/高度，它應該永遠是對的中心頁。 margin：0px自動代碼給它水平居中。但這是骷髏最好的做法嗎？骷髏會提供更好的方式嗎？

另外我怎樣才能提供它的垂直居中？

來源

2013-08-06 Can Sürmeli

可以設置容器

.container { 
      position: absolute; 
      top: 50%; 
      left: 50%; 
      margin-left: -43 //replace with half of the width of the container 
      margin-top: -52 //replace with half of the height of the container 
}

設置父容器或元素的位置是：相對於;

下面是關於How to Center Anything With CSS

來源

2013-08-06 10:11:43 Patrick

一個很好的文章，我知道它已經有一段時間，因爲這個問題被問，但也許別人可以使用的答案。我能夠通過填充三分之一的柱子類與空間，然後是下一個三分之一的柱子類與內容，然後再一個三分之一的柱子類再次與空間完成與骨架集中。

<div class="one-third column">&nbsp;</div> 
<div class="one-third column"><p>Center of the screen.</p></div> 
<div class="one-third column">&nbsp;</div>

來源

2014-03-30 18:38:39 asus3000

什麼是令人厭惡的黑客 –

實際上有一種在骷髏中定位div的內置方式。

<div class="sixteen columns"> 
    <div class="four columns offset-by-six"> 
     <p>Lorem ipsum dolor sit amet.</p> 
    </div> 
</div>

這種情況下，偏移量爲6可以從1更改爲15，並且手頭的列偏移所輸入的列數。作爲一個整潔的功能，當使用較小的屏幕時，偏移不會影響對齊。

澄清：這不是中心div的實際內容，但中心div本身。

來源

2014-06-13 13:11:41 gkj

Asus3000的答案是好的，因爲這是我所做的，它運作良好。我只會在移動設備上增加一些不必要的垂直空間。爲了避免移動垂直空間，我使用了一個class .filler並將其隱藏在移動設備上。

HTML

<div class="one-third column filler">&nbsp;</div> 
<div class="one-third column"><p>Center of the screen.</p></div> 
<div class="one-third column filler">&nbsp;</div>

CSS

/* or whatever mobile viewport */ 
@media only screen and (max-width: 960px) { 
    .filler { display: none} 
}

來源

2015-09-23 19:44:48

一種方法，我相信作品相當不錯的是：

<div class="container"> 
    <div class="row"> 
    <div class="two-half column"> 
    centered div content 
    </div> 
    </div> 
    </div>

這使得中心和響應股利。您可以更改margin-top以使其始終位於中間，但寬度變化（當然）不會使其居中。

糾正我，如果我錯了，但這對我有用！ :)

來源

2016-08-02 10:12:35 user2883106

居中在骷髏div

回答

相關問題