“how to center a div” Code Answer

center div horizontally and vertically

css by Concerned Crossbill on Jun 22 2020 Donate

.parent {
  position: relative;
}
.child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Source: codepen.io

how to center div

html by Glorious Gorilla on Jun 21 2020 Donate

<!--center text-->
<!--padding deals with margins within the element itself-->
<!--margin deals with blank space surrounding and element-->
<!DOCTYPE html>
<html>
<head>
<style>
.center {
  margin: auto;
  width: 80%;
  border: 3px solid #73AD21;
  padding: 10px; 
  margin: 20px;
}
</style>
</head>
<body>

<h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>

<div class="center">
  <p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
</div>

</body>
</html>

css text align center

css by TheDevStar on Apr 09 2020 Donate

body {
  text-align: center;
}

css center vertically

css by Fair Finch on Apr 01 2020 Donate

<style>
.container {
  height: 200px;
  position: relative;
  border: 3px solid green;
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>

<div class="container">
  <div class="center">
    <p>I am vertically and horizontally centered.</p>
  </div>
</div>

how to center a div

css by Cruel Crab on Dec 03 2020 Donate

width:480px; // as most smartphones have this width
margin:auto

how to center a div

whatever by Splendid Shark on Aug 13 2020 Donate

margin:auto

CSS answers related to “how to center a div”

CSS queries related to “how to center a div”

Learn how Grepper helps you improve as a Developer!

INSTALL GREPPER FOR CHROME

Browse CSS Answers by Framework

“how to center a div” Code Answer

CSS answers related to “how to center a div”

CSS queries related to “how to center a div”

Learn how Grepper helps you improve as a Developer!

Browse CSS Answers by Framework

More “Kinda” Related CSS Answers View All CSS Answers »

Browse Other Code Languages

Grepper

Documentation

Social

Legal

Contact