如何把div與CSS的中心？

-2

我想把div.father放在屏幕的中心，並把div.son放在div.father的中心。如何把div與CSS的中心？

這是我想要的。

如何重寫我的CSS代碼來獲得結果呢？

<!DOCTYPE html> 
<html> 
<head> 
<meta content="text/html" charset="utf-8"> 
<title> boxes</title> 
<style type="text/css"> 

div.father{margin: 0 auto;width:300px;height:300px;border:1px solid black;} 
div.son{margin: 0 auto;width:100px;height:100px;border:1px solid black;} 
</style> 
</head> 
<body> 
<div class="father"> 
    <div class="son"></div> 
</div> 
</body> 
</html>

來源

2016-01-22 it_is_a_literature

哪個IE版本需要支持？ – fcalderan

關於[centering in css]（https://css-tricks.com/centering-css-complete-guide/） – aug

以下css將使中心都div。

display:flex和position:absolute會做的伎倆。
將垂直居中子div，並且justify-content: center;將在父水平內。

div.father { 
 
    align-items: center; 
 
    border: 1px solid black; 
 
    display: flex; 
 
    height: 300px; 
 
    justify-content: center; 
 
    left: 50%; 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    width: 300px; 
 
} 
 

 
div.son { 
 
    border: 1px solid black; 
 
    height: 100px; 
 
    width: 100px; 
 
}

<div class="father"> 
 
    <div class="son"></div> 
 
</div>

Working Fiddle

來源

2016-01-22 08:54:20 ketan

你可以這樣做：

div.father { 
 
\t margin: 0 auto; 
 
\t width:300px; 
 
\t height:300px; 
 
\t border:1px solid black; 
 

 
\t position: absolute; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t transform: translate(-50%, -50%); 
 
} 
 
div.son { 
 
\t margin: 0 auto; 
 
\t width:100px; 
 
\t height:100px; 
 
\t border:1px solid black; 
 

 
\t position: absolute; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t transform: translate(-50%, -50%); 
 
}

<div class="father"> 
 
    <div class="son"></div> 
 
</div>

position: absolute將是地方的兒子和父親出流。通過top和left，您可以將項目放置在您想要的位置absolute/relative/fixed或<body>或transform: translate(-50% -50%)的第一個父項的偏移量上，而不是從左上角居中，而是居中。

注意：您可以transform老版本的瀏覽器之前使用-moz-，-o-，-webkit-和-ms-前綴。

-webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
     transform: translate(-50%, -50%);

你也可以使用flex來達到同樣的目標，但如果你想支持所有IE familly，使用polyfil爲flex。

來源

2016-01-22 08:49:11

您可以使用flexbox。添加到父divdisplay: flex和justify-content: center（用於水平對齊）與align-items: center（垂直對齊）：

div.father { 
 
    margin: 0 auto; 
 
    width: 300px; 
 
    height: 300px; 
 
    border: 1px solid black; 
 
    display: flex;/*add this*/ 
 
    justify-content: center;/*add this for horizontal align*/ 
 
    align-items: center;/*add this for vertical*/ 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 
div.son { 
 
    margin: 0 auto; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
}

<div class="father"> 
 
    <div class="son"></div> 
 
</div>

編輯：對於水平和垂直對齊您可以使用屏幕中間招數描述到這篇文章Centering Percentage Width/Height Elements。

參考

flex

來源

2016-01-22 08:57:05

的一篇很好的文章要小心flex，所有瀏覽器仍然被很多人使用http：///gs.statcounter.com/不支持它http://caniuse.com/#feat=flexbox，但是爲未來的人類提供解決方案:) –

@Haeresis看看[瀏覽器支持]（http：// caniuse。 com /＃feat = flexbox） –

div.father不能在我的firefox屏幕中心。 –

試試這個......

html,body{ 
 
    \t height: 100%; 
 
    \t width: 100%; 
 
    \t margin: 0px; 
 
    \t padding: 0px; 
 
    \t display: flex; 
 
    \t align-items: center; 
 
    } 
 
    \t 
 
    .parent{ 
 
    \t border:1px solid; 
 
    \t width: 400px; 
 
    \t height: 400px; 
 
    \t margin: 0 auto; 
 
    \t display: flex; 
 
    \t align-items: center; 
 
    
 
    } 
 
    .child{ 
 
    \t border:1px solid; 
 
    \t width: 200px; 
 
    \t height: 200px; 
 
    \t margin: 0 auto; 
 
    \t 
 
    \t 
 
    }

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

來源

2016-01-22 09:03:35 BlackJack

-1

在div.father類添加這個屬性

div.father{position:relative;}

添加這個屬性在div.son類

div.son{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    height:100px; 
    width:100px; 
    margin: auto; 
    }

這將工作跨瀏覽器

來源

2016-01-22 09:43:34

如何把div與CSS的中心？

回答

相關問題