How to center a div inside a div with HTML and CSS?

There's no way to float center in CSS layout.
It is therefore necessary to use other ways to make DIV elements float in the central position.

Use Margin Auto to Center DIV Element

code:


<!DOCTYPE html>
<html >
<head>
<style>
.content {
background-color:yellow;
}
.block {
width:50%;
height:200px;
background-color:red;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="content">
  <br>
    <div class="block">
</div>
</body>
</html>

result:


BLOCK




JSFiddle






HTML Div Float Center without CSS positioning

code:


<!DOCTYPE html>
<html>
<header>
<style>
.content {
background-color:yellow;
}
.block {
width:50%;
height:200px;
background-color:red;
}
</style>
</header>
<body>
 <div class="content">
   <br>
   <div align="center">
    <div class="block">
     <p>BLOCK</p>
    </div>
  <br>
  </div>
</div>
</body>
</html>

result:


BLOCK














How to center a div inside a div with html and css (YouTube)