html盒子水平和垂直居中


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
#main {
    width: 400px;
    height: 150px;
    border: 1px solid #c3c3c3;
    display: flex;
    justify-content: center;
	align-items: center;
}

#main div {
    width: 70px;
    height: 70px;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;"></div>
</div>

<p><b>注意:</b> Internet Explorer 10 及更早版本瀏覽器不支持 justify-content 屬性。</p>
<p><b>注意:</b> Safari 6.1 及更新版本通過 -webkit-justify-content 屬性支持該屬性。</p>

</body>
</html>

  

原文地址:http://www.runoob.com/try/try.php?filename=trycss3_justify-content


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM