為什么我的div塊不在同一個地方？-有解無憂

在第一張圖片中，您可以看到藍色塊位于灰色背景的中心。這就是我想要的樣子。美好的。為什么我的 div 塊不在同一個地方？然而，在第二張圖片中，當視窗放大時它沒有移動。藍色塊是#bodyCenterCont并且它在#bodyCont. 如果您需要更多代碼，請告訴我。我已經嘗試了所有不同的位置和利潤。我對相關的、固定的和絕對的沒有完全理解。為什么我的 div 塊不在同一個地方？

標題##CODE：

*** The new CSS Reset - version 1.2.0 (last updated 23.7.2021) ***/
/* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property */

*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
  all: unset;
  display: revert;
}


/* Preferred box-sizing value */

*,
*::before,
*::after {
  box-sizing: border-box;
}


/*
Remove list styles (bullets/numbers)
in case you use it with normalize.css */

ol,
ul {
  list-style: none;
}


/* For images to not be able to exceed their container */

img {
  max-width: 100%;
}


/* Removes spacing between cells in tables */

table {
  border-collapse: collapse;
}


/* Revert the 'white-space' property for textarea elements on Safari */

textarea {
  white-space: revert;
}

#parentCont {
  background-color: grey;
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}

#welcomeCont {
  background-image: linear-gradient(rgb(255, 0, 0), rgb(255, 255, 0));
  height: 150px;
}

#welcomeText {
  color: rgb(0, 0, 0);
  font-size: 35px;
  margin-top: 40px;
  text-align: center;
}

#bodyCont {
  background-image: linear-gradient(grey, black);
  height: 100%;
  width: 100%;
}

#bodyCenterCont {
  background-color: blue;
  height: 400px;
  width: 350px;
  position: relative;
  margin-top: 15%;
  margin-left: 30%;
}

<div id="parentCont">
  <div id="welcomeCont">
    <p id="welcomeText">Legend & Myth</p>
  </div>

  <div id="bodyCont">
    <div id="bodyCenterCont">

    </div>
  </div>
</div>

uj5u.com熱心網友回復：

試試這個：

#bodyCenterCont{
position: absolute;
height:400px;
width:350px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background:blue;
padding: 10px;
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/375027.html

標籤：html css

上一篇：無法構建陣列并在AWK中列印出來

下一篇：Flex-end無法處理顯示flex的div內的按鈕