Position CSS example

center text and block position relative, absolute, fixed

by Nidhi Patel

HTML

<!-- Make block center -->
<div class="out">
  <div class="in"></div>
   <div class="in"></div>
</div> <br />
<div class="container">
  <div class="home">Home</div>
  <div class="search">Search</div>
  <div class="logout">Logout</div>
  <div>Profile</div>
</div> <br />
<!-- single line vertically centered -->
<div class="algn">google.com</div> 
<div class="algn">google.com</div> <br />
<!-- multiple line vertically centered -->
<div class="a">
  <p class="b">hsdsbhdsjh bfjdshc njksjfjskxobxipobj bsusjclidn loxsapdi bweir
  </p>
</div> <br>
<!-- Position relative, absolute and fixed example -->
<div class="uncle common">Uncle</div>
<div class="parent">
<div class="first common">First</div>
<div class="second common">Second</div>
<div class="third common">Third</div>
</div>

CSS

.common{
  font-size: 50px;
  color: white;
}

.first{
  background-color: red;
}
.second{
  background-color: green;
 position: absolute; 
  top: 30%;
  right: 20%;

}
.third{
  background-color: yellow;
  
}
.parent{
  position: relative;
}
.uncle{
  background-color: gray;
}

.algn{
  background-color: black;
  color: white;
  width: 150px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.a{
  height: 120px;
  width: 180px;
  background-color: black;
  color: white;
  display:table;
}
.a p{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
 
}

.out{
  height: 200px;
  width: 200px;
  background-color: black;
  position: relative;
  display: flex;
  justify-content: center;
}
.in{
  height: 50px;
  width: 50px;
  background-color: red;
  position: absolute;
  /* top: 50%;
  left: 50%; */
  align-self: center;
  /* transform: translate(-50%, -50%); */
  
}


.container{
  border: 5px solid red;
  display: flex;
  justify-content: flex-end;
}
.home{
  margin-right: auto;
}
.container > div{
  width: 80px;
  height: 50px;
  border: 1px solid black;
  text-align: center;
  flex: 1;
}
.container > .search{
  flex: 2;
}