Answers for "how to set a div in center horizontally and vertically"

CSS
9

center div horizontally and vertically

.parent {
  position: relative;
}
.child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
Posted by: Guest on June-22-2020
26

css vertical center

/*Remove comment to become a better programmer. */
/* No Flexbox */
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* With Flexbox */

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
Posted by: Guest on January-11-2021
2

css center vertically and horizontally

body {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
/* to make "align-items: center" work: use "min-height: 100vh;"
100vh = 100% Viewport Height */
Posted by: Guest on May-04-2021
0

how to center horizontally and vertically block div

#html code
<div class="parent">
	<h1 class="child">CSS is cool</h1>
</div>

#css code
.parent{
  display:grid;
  place-items:center;
  
  width:560px; 
  height: 560px;
}
Posted by: Guest on December-05-2020

Code answers related to "how to set a div in center horizontally and vertically"

Browse Popular Code Answers by Language