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>
No comments:
Post a Comment