Skip to content

sureshalagarsamy/html-div-inside-div-vertical

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 

Repository files navigation

Div inside div vertically center

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Div inside div vertical and horizontally center</title>
</head>

<body>
<div class="parent">
  <div class="child">test</div>
  </div>
</body>

</html>

CSS

div.parent {
    display: table-cell;
    width: 200px;
    height: 200px;
    background: #FFF;
    vertical-align: middle;
    text-align: center;
    border: 1px solid #BBB;
}

div.child {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: #DDD;
    border: 1px solid #999;
}

Output

ScreenShot