CSS | Layout – Horizontal & Vertical Align

14 Feb, 2019
The Layout in CSS is used to control the flow of element inside another element. It sets the position of element in the web page. The position of element can be set by using horizontal and vertical alignment. There are many ways to set the position of element which are listed below:
Using Position Property: Use position property to absolute to set the align left and right.
Syntax:
position: absolute;
Example:
<!DOCTYPE html> <html>     <head>         <title>             CSS Layout         </title>               <style>            body{                width: 500px;                height: 150px;                border: 3px solid green;            }            #content{                position: absolute;            }        </style>    </head>          <body>         <div id="content">            <h1 style = "color:green;" >                 GeeksForGeeks             </h1>                           <h2>CSS Layout</h2>        </div>    </body> </html>                                
Output:
Using text align property: Use text-align property to set the horizontal alignment of an element. The text-align property can be set to left, right or center.
Syntax:
text-align: center;
Example:
<!DOCTYPE html> <html>     <head>         <title>             CSS Layout         </title>               <style>            body{                width: 500px;                height: 150px;                border: 3px solid green;            }            #content{                text-align: center;            }        </style>    </head>          <body>         <div id="content">            <h1 style = "color:green;" >                 GeeksForGeeks             </h1>                               <h2>CSS Layout</h2>        </div>    </body> </html>                                
Output:
Using float property: Use float property to set the alignment of element. The float value can be set to left or right.
Syntax:
float: right;
Example:
<!DOCTYPE html> <html>     <head>         <title>             CSS Layout         </title>               <style>            body{                width: 500px;                height: 150px;                border: 3px solid green;            }            #content{                float: right;            }        </style>    </head>          <body>         <div id="content">            <h1 style = "color:green;" >                 GeeksForGeeks             </h1>                           <h2>CSS Layout</h2>        </div>    </body> </html>                    
Output:
Use Padding property Horizontally: Padding property is used to set the element align to Horizontally by using left and right padding.
Syntax:
padding: 0 100px;
Example:
<!DOCTYPE html> <html>     <head>         <title>             CSS Layout         </title>              <style>            body{                width: 500px;                height: 150px;                border: 3px solid green;            }            #content{                padding: 0 100px;            }        </style>    </head>          <body>         <div id="content">            <h1 style = "color:green;" >                 GeeksForGeeks             </h1>                           <h2>CSS Layout</h2>        </div>    </body> </html>                    
Output:
Use Padding property Vertically: Padding property is used to set the element align to Vertically by using top and bottom padding.
Syntax:
padding: 15px 0;
Example:
<!DOCTYPE html> <html>     <head>         <title>             CSS Layout         </title>                   <style>            body{                width: 500px;                height: 150px;                border: 3px solid green;            }            #content{                padding: 15px 0;                text-align: center;            }        </style>    </head>          <body>         <div id="content">            <h1 style = "color:green;" >                 GeeksForGeeks             </h1>                               <h2>CSS Layout</h2>        </div>    </body> </html>                    
Output:
Line height property: Line height is used to set the alignment vertically.
Syntax:
line-height: 40px;
Example:
<!DOCTYPE html> <html>     <head>         <title>             CSS Layout         </title>           <style>            body {                width: 500px;                height: 150px;                border: 3px solid green;            }            #content {                line-height: 40px;            }        </style>    </head>          <body>         <div id="content">            <h1 style = "color:green;" >                 GeeksForGeeks             </h1>                           <h2>CSS Layout</h2>        </div>    </body> </html>                    
Output:
Using margin property: Margin property is used to set auto, align horizontally a block element.
Syntax:
margin: auto;
Example:
<!DOCTYPE html> <html>     <head>         <title>             CSS Layout         </title>           <style>            body {                width: 500px;                height: 150px;                border: 3px solid green;            }            #content {                margin: auto;                width: 300px;                 height: 100px;            }        </style>    <head>              <body>         <div id="content">            <h1 style = "color:green;" >                 GeeksForGeeks             </h1>                           <h2>CSS Layout</h2>        </div>    </body> </html>                    
Output:
Using Clearfix: If any element is taller than its parent element and it is floated then it will overflow outside of its container. Overflow is set to auto to fix this.
Syntax:
overflow: auto;
Example:
<!DOCTYPE html> <html>     <head>         <title>             CSS Layout         </title>               <style>            body {                width: 500px;                height: 150px;                border: 3px solid green;            }            #content {                overflow: auto;             }        </style>    </head>          <body>         <div id="content">            <h1 style = "color:green;" >                 GeeksForGeeks             </h1>                           <h2>CSS Layout</h2>        </div>    </body> </html>                    
Output:
Using transform and positioning: The transform property is used to transform an element relative to its parent element along with position to absolute.
Syntax:
position: absolute;
transform: translate(X%, Y%);
Example:
<!DOCTYPE html> <html>     <head>         <title>             CSS Layout         </title>           <style>            body {                width: 500px;                height: 150px;                border: 3px solid green;            }            #content {                position: absolute;                transform: translate(50%, 10%);             }        </style>    </head>          <body>         <div id="content">            <h1 style = "color:green;" >                 GeeksForGeeks             </h1>                           <h2>CSS Layout</h2>        </div>    </body> </html>                    
Output:
CSS-Basics
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?