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">
   <p>BLOCK</p>
 </div>
</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)



Privacy Policy