div嵌套div的居中問題

時間 2020-02-06

標籤 div 嵌套居中問題欄目 CSS 简体版

原文原文鏈接

div嵌套div，咱們常常都用。佈局是基礎，紮實的基礎會讓你在解決問題的時候更柔韻有餘。這是我出來工做以後深深的領悟。下面是我對外層佈局的一些小總結。css

<!DOCTYPE HTML>
<html>
<head>
<title>div嵌套div居中問題</title>
  <meta http-equiv="content-type"content="text/html; charset=UTF-8"/>
  <style type="text/css">
  .BD-one{
    width:200px;
	height:200px;
	background-color:red;
  }
  .content-one{
    width:40px;
	height:40px;
	background-color:yellow;

	margin:0 auto; /* 這是最常常用到的 */
  }


  .BD-two{
    width:200px;
	height:200px;

	background-color:green;

	/* 這裏的 父容器須要有position的設置，不管是relative 仍是 absolute */
	position:relative;
  }
  .content-two{
    width:60px;
	height:40px;
	background-color:yellow;

    position:absolute;
	/* 這裏的 top left：50%都是相對於父容器的 */
	top:50%;
	left:50%;
	/* 這裏的 margin-top margin-left:-20px都是相對於本身的。設置不一樣的值查看效果 */
	margin-top:-20px; /* 40/20 */
	margin-left:-30px; /* 60/20 */
  }

  .BD-three{
    /* 最外層 用百分比 就不行了 */
	/* 如這裏width:100%;  height:100% */
    width:900px;
	height:300px;
	background-color:blue;
  }
  .BFB{
    /* 父容器用%也是能夠的 */
    width:20%;
	height:20%;
	background-color:red;

	/* 這裏的 父容器須要有position的設置，不管是relative 仍是 absolute */
	position:relative;
  }
  .content-three{
    width:40px;
	height:40px;
	background-color:yellow;

    position:absolute;
	/* 這裏的 top left：50%都是相對於父容器的 */
	top:50%;
	left:50%;
	/* 這裏的 margin-top margin-left:-20px都是相對於本身的 */
	margin-top:-20px;
	margin-left:-20px;

  </style>
</head>
<body>
  <span>這裏針對的是靜態的HTML元素</span>
  <span>若是是動態生成的元素，JS會更好</span>

  <span>左右居中</span>
  <div class="BD-one">
    <div class="content-one"></div>
  </div>

  <br/>

  <span>上下左右居中</span>
  <div class="BD-two">
    <div class="content-two"></div>
  </div>

  <span>上下左右居中,父容器採用%的狀況</span>
  <div class="BD-three">
    <div class="BFB">
      <div class="content-three"></div>
    </div>
  </div>
</body>
</html>

才疏學淺，若有建議或者意見，望留言指正。html

(●'◡'●)佈局