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:
<!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.
