CSS - 居中div水平和垂直不工作（我讀現有的帖子，但沒有任何作品...）

我有一個內聯塊顯示div，以便它包裝很好的內容。我正在嘗試做的是使用我已經使用的不同工藝水平和垂直居中該div，這是我在帖子上閱讀的技術，但沒有任何工作。希望有人能幫忙。預先感謝您的回覆。乾杯。馬克..CSS - 居中div水平和垂直不工作（我讀現有的帖子，但沒有任何作品...）

http://jsfiddle.net/DfDLF/

我的html：

<div> 
    <input type='text'> 
    <input type='text'> 
    <input type="submit"> 
</div>

我的CSS：

div{ 
display:inline-block; 
padding:5px; 
background:grey; 
top:50%; 
margin-left:auto; 
margin-right:auto;}

來源

2012-03-17 Marc

http://stackoverflow.com/questions/114543/how-to-center-div-in-div – ZiTAL 2012-03-17 18:01:49

你好ZITAL。感謝您的鏈接，但提出的解決方案無法正常工作...... – Marc 2012-03-17 18:08:11

div { 

    height: 100px; /* specify width */ 
    width: 400px; /* specify height */ 

    position: absolute; /* position to absolute */ 

    top: 50%; /* push top 50% */ 
    left: 50%; /* push left 50% */ 

    margin-top: -50px; /* set margin top to minus half height */ 
    margin-left: -200px; /* set margin left to minus half width */ 

    /* your styles.. */ 
    padding: 5px; 
    background: grey; 
}

設置你的CSS來此。

來源

2012-03-17 18:13:01

非常感謝Joshua。這非常清楚... – Marc 2012-03-17 18:18:17

CSS

#vertical_align { 
    height: 800px; /* need */ 
    width:100%; 
    display: table; 
    border:1px solid; 
    #position: relative; 
    overflow: hidden; 
} 
#vertical_align .container { 
    #position: absolute; 
    #top: 50%; 
    display: table-cell; 
    vertical-align: middle; 
} 
#vertical_align .container .wrap { 
    #position: relative; 
    width: 100%; 
    border:1px solid; 
    #top: -50%; 
}

HTML

<div id="vertical_align"> 
    <div class="container"> 
     <div class="wrap"> 
      <center> 
       Your content 
      </center> 
     </div> 
    </div> 
</div>

來源

2012-03-17 18:03:10 M1K1O

**爲什麼您使用不再支持的元素？** – animuson 2012-03-17 18:12:21

'vertical-align：middle'確實折舊了。 – 2012-03-17 18:13:43

你不能中心inline-block的使用保證金：汽車由於其內嵌的行爲。所以你可以使用下面的體{文本對齊：中心;}和您的DIV將圍繞漂亮

來源

2012-03-17 18:06:37

這裏有一個選項：http://jsfiddle.net/DfDLF/24/

來源

2012-03-17 18:09:55 Steve

CSS - 居中div水平和垂直不工作（我讀現有的帖子，但沒有任何作品...）

回答

相關問題