Horizontal & Vertical Alignment For Div Tag Using CSS

Posted 8 months, 1 week ago at 8:15 pm. 0 comments

In most of the cases when you are working with HTML div elements you may required to align the div on the desired location of the web page using CSS Horizontal and Vertical alignment. The HTML div tag is nothing more than a container for other tags. Much like the body tag, Div elements are blocking elements and work in the following scenes grouping other tags together. The attributes id, width, height, title and style used with div element, anything else should be engaged for CSS. The below example will guide you to understand how to align the div tag elements Horizontal and Vertical


#mydiv {
position:absolute;
top: 50%;
left: 50%;
width:350px;
height:300px;
margin-top: -150px; /*set to a negative number 1/2 of your height*/
margin-left: -175px; /*set to a negative number 1/2 of your width*/
border: 2px solid #2956C6;
background-color: #FFB;
text-align: center;
}