vertical and horizontal alignment css code example

Example 1: css center image

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Example 2: center with css

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

Example 3: css align center vertical and horizontal

.parent-class {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

Example 4: how to center div

<!--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>

Tags:

Misc Example

Related

javascript insert data from one array to beginning of other code example loren ipusm text code example firebase nodejs save data code example flutter programmatical close dialog code example laravel query builder on model code example js html circle design code example initialize project using create react code example check whether key exists or not in array of object javascript code example install youtube-dl ububtu code example pip : The term 'pip' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1 code example to merge multiple dataframe in python code example error: src refspec feature/save-and-view-covers does not match any code example

Recent Posts