Skip to main content
X

Explore your training options in 10 minutes

Center Elements With CSS Using Text-Align, Margins and More

Christina Kopecky - July 24, 2020


In this CSS tutorial, we will go over how to center text and block elements. There are several tricks you can use to center elements horizontally and vertically in a layout.

Center Align Text Elements

To center align text inside a larger element, use text-align: center; as seen below:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Center</title>
   <style>
       .div-class {
           text-align: center;
           background-color: lightblue;
       }
       button {
           width: 200px;
       }
   </style>
</head>
<body>
   <div class="div-class">
       <p>I'm a paragraph</p>
       <button>I'm a submit button</button>
       <div>I'm a div</div>
       <p>And all the text is being centered by text-align: center</p>
 
   </div>
</body>
</html>

Center Align Block Elements:

Centering block elements is best illustrated by using the <body> tag of an HTML document. What you need to do is control the width of the overall container and then set the margin to auto:

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses










By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Center</title>
   <style>
       body {
           width: 800px;
           margin: auto;
           background: darkcyan;
           color: white;
           font-family: 'roboto';
           padding: 20px;
       }
       .div-class {
           text-align: center;
           background-color: lightblue;
           color: black;
       }
       button {
           width: 200px;
       }
 
   </style>
</head>
<body>
I'm the top of the body. I control the width of the app container (in this case 800px) and can center the whole app by using <strong>margin: auto</strong>. If you wanted to center <strong>this</strong> text, use text-align: center</strong>
   <div class="div-class">
       <p>I'm a paragraph</p>
       <button>I'm a submit button</button>
       <div>I'm a div</div>
       <p>And all the text is being centered by <strong>text-align: center</strong></p>
   </div>
 
</body>
</html>

Center Align Image:

To center an image, in the CSS selector, change your display to block and then control the width of the image element, using % or px . Set margin to auto :

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Center</title>
   <style>
       body {
           width: 800px;
           margin: auto;
           background: darkcyan;
           color: white;
           font-family: 'Roboto';
           padding: 20px;
       }
       .div-class {
           text-align: center;
           background-color: lightblue;
           color: black;
       }
       button {
           width: 200px;
       }
img {
           display: block;
           margin: 20px auto;
           width: 50%;
       }
 
 
   </style>
</head>
<body>
I'm the top of the body. I control the width of the app container (in this case 800px) and can center the whole app by using <strong>margin: auto</strong>. If you wanted to center <strong>this</strong> text, use text-align: center</strong>
   <div class="div-class">
       <p>I'm a paragraph</p>
       <button>I'm a submit button</button>
       <div>I'm a div</div>
       <p>And all the text is being centered by <strong>text-align: center</strong></p>
   </div>
   <p style="margin: auto; width: 400px;">To center image below, change display to block and then set margins to auto, control the width using px or %</p>
   <img src="http://www.placekitten.com/500/301" alt="kittens"/>
 
 
</body>
</html>

Center Vertically and Horizontally in a Div:

padding:

To center vertically in a <div> , there are several ways to do it. First, and probably the easiest, is to adjust the padding in your <div> – you can then use text-align: center to center the paragraph horizontally:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Center</title>
   <style>
       body {
           width: 800px;
           margin: auto;
           background: darkcyan;
           color: white;
           font-family: 'Roboto';
           padding: 20px;
       }
       .div-class {
           text-align: center;
           background-color: lightblue;
           color: black;
       }
       button {
           width: 200px;
       }
img {
           display: block;
           margin: 20px auto;
           width: 50%;
       }
 
 
   </style>
</head>
<body>
I'm the top of the body. I control the width of the app container (in this case 800px) and can center the whole app by using <strong>margin: auto</strong>. If you wanted to center <strong>this</strong> text, use text-align: center</strong>
   <div class="div-class">
       <p>I'm a paragraph</p>
       <button>I'm a submit button</button>
       <div>I'm a div</div>
       <p>And all the text is being centered by <strong>text-align: center</strong></p>
   </div>
   <p style="margin: auto; width: 400px;">To center image below, change display to block and then set margins to auto, control the width using px or %</p>
   <img src="http://www.placekitten.com/500/301" alt="kittens"/>
 
 
</body>
</html>

line-height:

You can also set line-height to the height of the block element you are centering in conjunction with text-align: center to align the element to the center. If you have multiple lines, use line-height on both parent and child and add vertical-align: middle and display: inline-block to the child:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Center</title>
   <style>
       body {
           width: 800px;
           margin: auto;
           background: darkcyan;
           color: white;
           font-family: 'roboto';
           padding: 20px;
       }
       #vertical-center-lineheight {
           line-height: 200px;
           border: 5px double ivory;
           text-align: center;
           margin-bottom: 20px;
       }
 
 
   </style>
</head>
<body>
   <div id="vertical-center-lineheight">
       <p>I am vertically centered and horizontally centered in a div using lineheight and text-align: center.</p>
   </div>
   <div id="vertical-center-lh-multiple">
       <p>I am vertically centered and horizontally centered in a div using lineheight, display: inline-block,  and vertical-align: middle. Use me when you have multiple lines of text to center across horizontal and vertical axes. </p>
   </div>
 
 
  
</body>
</html>

transform:

Another way you can center elements is by using position and transform. Set the parent element to position: relative, the child element to absolute positioning. The child element will need to be positioned at the top and left at 50% and then we use the transform property to adjust the text in the div. We’ll talk more about this property in another post so it’s all right if it’s not 100 percent clear at the moment:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Center</title>
   <style>
       body {
           width: 800px;
           margin: auto;
           background: darkcyan;
           color: white;
           font-family: 'roboto';
           padding: 20px;
       }
       #vertical-center-transform {
           height: 200px;
           position: relative;
           border: 5px double ivory;
           margin-bottom: 20px;
          
       }
       #vertical-center-transform p {
           margin: 0;
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
       }
    </style>
</head>
<body>
   <div id="vertical-center-transform">
       <p>I am vertically centered and horizontally centered in a div using transform. Text is <strong>NOT</strong> center aligned.</p>
   </div>  
</body>
</html>

flexbox:

Lastly, we can center elements by using flexbox. Set display: flex to the parent element of the children you would like to center and then use align-items and justify-content to center it:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Center</title>
   <style>
       body {
           width: 800px;
           margin: auto;
           background: darkcyan;
           color: white;
           font-family: 'roboto';
           padding: 20px;
       }
       #vertical-center-flexbox {
           height: 200px;
           display: flex;
           align-items: center;
           justify-content: center;
           border: 5px double ivory;
       }
   </style>
</head>
<body>
   <div id="vertical-center-flexbox">
       <p>I am vertically and horizontally centered in a div using flexbox.</p>
   </div>
</body>
</html>

These are the most common ways you can solve the problem of centering your elements in your layout.

About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.

What's Next?

Christina Kopecky

About the author: Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.

Skip to main content