圍繞一個div不使用Flexbox的

-4

<div id="container"> 
    <div id="content"> 
    </div> 
</div>

，我想對水平和垂直居中。我不要想要使用Flexbox，因爲我必須支持舊版瀏覽器。因此，像這樣的工作：

position: absolute; 
top: 50%; 
left: 50%; 
width: 30em; 
height: 18em;

但問題是，你必須指定一組寬度和高度，這也是我不想做的事情。我希望#container的寬度和高度由#content決定。

有沒有辦法實現這一點？

來源

2016-04-03 Tiwaz89

使用'頂部：50％;轉化：translateY（-50％）;'方法。搜索難以找到答案;你會發現幾十個。 – 2016-04-03 06:46:19

如果要水平居中內容，可以使用容器，併爲該父容器定義文本對齊。這不需要任何元素的設置寬度。儘管你的父容器顯然需要比孩子更寬。

例如：

<div style="text-align:center;"> 
    <div> 
    this element will be centered 
    </div> 
</div>

我應該指出，子元素將需要設置爲display:block或display:inline-block ...這是默認的，但需要，如果你使用任何被指定其他更高級的頁面顯示模式。

不幸的是，我知道沒有設置高度的垂直居中的方法。

來源

2016-04-03 06:46:46 ijason

您可以使用CSS變換

#container{ 
    position:relative; 
    border:1px solid black; 
    height:500px; 
} 

#content{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    border:1px solid black; 
    -webkit-transform:translate(-50%, -50%); 
    -moz-transform:translate(-50%, -50%); 
    -ms-transform:translate(-50%, -50%); 
    -o-transform:translate(-50%, -50%); 
    transform:translate(-50%, -50%); 
}

JSFiddle

來源

2016-04-03 06:48:31 MOD

#container { 
    position: relative; 
} 

#content { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}

您移動內容的左上角到容器的中心，然後，您利用在轉換百分率值是相對於元素的大小（與大多數相對於父級的百分比不同），以將內容向上移動並向左移回其大小的一半。

根據您需要的舊瀏覽器，您可能需要添加一些前綴。 IE9需要-ms轉換。

如果您需要支持IE 8及更早版本，這將變得更加棘手。

來源

2016-04-03 06:48:37

對於垂直居中，您可以使用translateY。這裏有一個例子

#container { 
    border: 1px solid red; 
    height: 150px; 
    width: 100px; 
    position: relative; 
} 

#content { 
    position: absolute; 
    border: 1px solid green; 
    margin: auto; 
    transform: translateY(-50%); 
    top: 50%; 
    left: 0; 
    right: 0; 
    display: inline-block; 
}

看到這個筆的工作解決方案http://codepen.io/anon/pen/xVXQPO?editors=1100

來源

2016-04-03 06:48:42 gabesoft

嘿@gabesoft，感謝您的答案..但筆似乎並沒有工作。 – Tiwaz89

#container{ 
 
    height: 600px; 
 
    width: 700px; 
 
    border: 1px solid red; 
 
    position: relative; 
 
    text-align: center; 
 
    font-style: 0; 
 
} 
 
#container:before{ 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 1px; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
} 
 
#content{ 
 
    position: relative; 
 
display: inline-block; 
 
vertical-align: middle; 
 
font-style: 14px; 
 
margin-left: -5px; 
 
width: 99%; 
 
}

<div id="container"> 
 
    <div id="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
 
    </div> 
 
</div>

來源

2016-04-03 06:53:25

圍繞一個div不使用Flexbox的

回答

相關問題