Here is CSS using for centering element
<html>
<head>
<style>
/*display table cell*/
.container1{
width: 200px;
height: 200px;
border : 1px solid red;
display : table-cell;
vertical-align: middle;
}
.content1{
border:1px solid blue;
}
/*CSS3 with transform*/
.container2{
margin-top:50px;
width: 200px;
height: 200px;
border : 1px solid red;
position:relative;
}
.content2{
border:1px solid blue;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
/*CSS3 with transform*/
.container3{
margin-top:50px;
width: 200px;
height: 200px;
border : 1px solid red;
display: flex;
align-items: center;
}
.content3{
border:1px solid blue;
}
</style>
</head>
<body>
<h2>
Centering vertical with table style:</h2>
<div class="container1">
<div class="content1">
1. This small paragraph is vertically centered.<br />
</div>
</div>
<h2>
Centering vertical CSS3 :</h2>
<div class="container2">
<div class="content2">
2. This small paragraph is vertically centered.<br />
</div>
</div>
<h2>
Centering vertical using Flex :</h2>
<div class="container3">
<div class="content3">
3. This small paragraph is vertically centered.<br />
</div>
</div>
</body>
</html>
No comments:
Post a Comment