webtechgroups
LightBlog

Banner Link

Showing posts with label How to Centering a div of unknown height and width. Show all posts
Showing posts with label How to Centering a div of unknown height and width. Show all posts

Thursday, December 21, 2017

How to Centering a div of unknown height and width

December 21, 2017 0

Horizontally and vertically. Works with reasonably suported modern browsers (FF, Safari/Webkit, Chrome, IE10, Opera, etc.)

<!doctype html>
 <head>
<title>How to Centering a div of unknown height and width</title>
<style>
.content {
  position: absolute;
  left: 50%;
  top: 50%;
  font-weight:800;
 -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>
 </head>

<body>
  <div class="content">This works with any content</div>
</body>
</html>



<!doctype html>
 <head>
<title>How to Centering a div of unknown height and width</title>
<style>
.center{
 width:200px;
 height:200px;
 background:#093;
 position:absolute;
 top:50%;
 left:50%;
 margin-left:-100px;
 margin-right:-100px;
}</style>
 </head>

<body>
  <div class="center">This works with any content</div>
</body>
</html>