0

I try to put the title on the center of the div of "introduction" div

#introduction {
  box-sizing: border-box;
  height: 800px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url(https://www.planetware.com/wpimages/2020/02/france-in-pictures-beautiful-places-to-photograph-eiffel-tower.jpg);
}

#introduction h1 {
  margin: 35% auto;
  position: relative;
  width: 100%;
  text-align: center;
}
<div id="introduction">
  <h1>Hanzi Li's Blog</h1>
</div>

by margin: 35% auto; I thought the title should be put 35% relative to the introduction div, but it seems that it is 35% relative to the screen:

output

hanzi
  • 21
  • 4
  • if you apply % units of height, width or margin then it applies it relative to the parent container which in thsi case is the body. So actually its not appleid to the screen but your empty body. If you want to vertically center the title within the div, use flexbox instead: `.introduction { display: flex; justify-content: center; align-items: center; }` and remove all the stylings for the h1 element as they are obsolete (redundant or not applying) in your case. – tacoshy Mar 17 '22 at 20:44
  • Yes, it works! Thanks for sharing that! sorry I just edited my question, I original try to put margin: 35% auto, in #introduction h1, and the output is also like that. – hanzi Mar 17 '22 at 20:55

0 Answers0