Center objects in html

How to center things in CSS

Sometimes, in CSS, we want to center everthing rapidly. But to do this, we have to think about it slowly, simply because, we must choose some properties such as postion, top, left, right, bottom, vertical align, text align, …

So, in this article, we will talk about some ways to center in our website’s content.

Table of contents

Centering lines of text

Normally, it is used for lines of text in a paragraph or in a heading.

p  text-align: center; > h2  text-align: center; > 

Centering a block or image

We can get it by to set the margins to auto . This is normally used with a block of fixed width, because if the block itself is flexible, it will simply take up all the available width. Here is an example:

 class="blocktext">This rather narrow block of text is centered. Note that the lines inside the block are not centered (they are left-aligned), unlike in the earlier example. 

p.blocktext  margin-left: auto; margin-right: auto; width: 8em; > 

 class="displayed" src=". " alt=". "> 

img.displayed  display: block; margin-left: auto; margin-right: auto; > 

Centering vertically

  class="container"> This small paragraph is vertically centered.  

 div.container  min-height: 10em; display: table-cell; vertical-align: middle; > 

  class="container"> This small paragraph is vertically centered. 

 div.container  height: 10em; position: relative; // (1) > div.container p  margin: 0; position: absolute; // (2) top: 50%; // (3) transform: translate(0, -50%); // (4) > 

• Make the container relatively positioned , which declares it to be a container for absolutely positioned elements.
• Make the element itself absolutely positioned .
• Place it halfway down the container with ‘top: 50%’. (Note that 50%’ here means 50% of the height of the container.)
• Use a translation to move the element up by half its own height. (The ‘50%’ in ‘translate(0, -50%)’ refers to the height of the element itself.)

  class="container"> This small paragraph is vertically centered. 

 div.container  height: 10em; display: flex; align-items: center; > div.container5 p  margin: 0; > 

Use line-height and height for centering elements in navigation

We can use line-height and height properties for this problem. Our code will have the following state:

 class="header">  class="logo">Navigation  class="menu">  href="#">Home  href="#">About  href="#">Services  href="#">Works  href="#">Contact   

*  margin: 0; padding: 0; > .header  height: 100px; background-color: #34495e; padding: 0 20px; > .logo  color: #ffffff; line-height: 100px; text-transform: uppercase; float: left; > .menu  float: right; line-height: 100px; background-color: #34495e; > .menu a  text-transform: uppercase; text-decoration: none; padding: 0 10px; color: #ffffff; transition: 0.7s; > .menu a:hover  color: #219AA7; > 

Centering object with html, css vertically and horizontally

In this part, we will usually use this below code into the problem that is relevant to center something in a screen.

.centered  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); > 

div.container  height: 10em; position: relative; > div.container p  margin: 0; background: yellow; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); > 

div.container  height: 10em; display: flex; align-items: center; justify-content: center; > div.container p  margin: 0; > 

Centering in the viewport with CSS3

The default container for absolutely positioned elements is the viewport.

  body  background: white; > section  background: black; color: white; border-radius: 1em; padding: 1em; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); >   Nicely centered This text block is vertically centered. Horizontally, too, if the window is wide enough.  

The margin-right: -50%; is needed to compensate the left: 50% . The left rule reduces the available width for the element by 50%. The renderer will thus try to make lines that are no longer than half the width of the container.

By saying that the right margin of the element is further to the right by that same amount, the maximum line length is again the same as the container’s width.

Источник

How to Center Anything with CSS — Align a Div, Text, and More

Kris Koishigawa

Centering things is one of the most difficult aspects of CSS.

The methods themselves usually aren’t difficult to understand. Instead, it’s more due to the fact that there are so many ways to center things.

The method you use can vary depending on the HTML element you’re trying to center, or whether you’re centering it horizontally or vertically.

In this tutorial, we’ll go over how to center different elements horizontally, vertically, and both vertically and horizontally.

Here’s an Interactive Scrim Showing How to Center Anything with CSS

How to Center Horizontally

Centering elements horizontally is generally easier than centering them vertically. Here are some common elements you may want to center horizontally and different ways to do it.

How to Center Text with the CSS Text-Align Center Property

To center text or links horizontally, just use the text-align property with the value center :

How to Center a Div with CSS Margin Auto

Use the shorthand margin property with the value 0 auto to center block-level elements like a div horizontally:

How to Center a Div Horizontally with Flexbox

Flexbox is the most modern way to center things on the page, and makes designing responsive layouts much easier than it used to be. However, it’s not fully supported in some legacy browsers like Internet Explorer.

To center an element horizontally with Flexbox, just apply display: flex and justify-content: center to the parent element:

How to Center Vertically

Centering elements vertically without modern methods like Flexbox can be a real chore. Here we’ll go over some of the older methods to center things vertically first, then show you how to do it with Flexbox.

How to Center a Div Vertically with CSS Absolute Positioning and Negative Margins

For a long time this was the go-to way to center things vertically. For this method you must know the height of the element you want to center.

First, set the position property of the parent element to relative .

Then for the child element, set the position property to absolute and top to 50% :

But that really just vertically centers the top edge of the child element.

To truly center the child element, set the margin-top property to -(half the child element’s height) :

How to Center a Div Vertically with Transform and Translate

If you don’t know the height of the element you want to center (or even if you do), this method is a nifty trick.

This method is very similar to the negative margins method above. Set the position property of the parent element to relative .

For the child element, set the position property to absolute and set top to 50% . Now instead of using a negative margin to truly center the child element, just use transform: translate(0, -50%) :

Note that translate(0, -50%) is shorthand for translateX(0) and translateY(-50%) . You could also write transform: translateY(-50%) to center the child element vertically.

How to Center a Div Vertically with Flexbox

Like centering things horizontally, Flexbox makes it super easy to center things vertically.

To center an element vertically, apply display: flex and align-items: center to the parent element:

How to Center Both Vertically and Horizontally

How to Center a Div Vertically and Horizontally with CSS Absolute Positioning and Negative Margins

This is very similar to the method above to center an element vertically. Like last time, you must know the width and height of the element you want to center.

Set the position property of the parent element to relative .

Then set the child’s position property to absolute , top to 50% , and left to 50% . This just centers the top left corner of the child element vertically and horizontally.

To truly center the child element, apply a negative top margin set to half the child element’s height, and a negative left margin set to half the child element’s width:

How to Center a Div Vertically and Horizontally with Transform and Translate

Use this method to center an element vertically and horizontally if you don’t know its exact dimensions and can’t use Flexbox.

First, set the position property of the parent element to relative .

Next, set the child element’s position property to absolute , top to 50% , and left to 50% .

Finally, use transform: translate(-50%, -50%) to truly center the child element:

How to Center a Div Vertically and Horizontally with Flexbox

Flexbox is the easiest way to center an element both vertically and horizontally.

This is really just a combination of the two previous Flexbox methods. To center the child element(s) horizontally and vertically, apply justify-content: center and align-items: center to the parent element:

That’s everything you need to know to center with the best of ’em. Now go forth and center all the things.

Источник

CSS Layout — Horizontal & Vertical Align

Setting the width of the element will prevent it from stretching out to the edges of its container.

The element will then take up the specified width, and the remaining space will be split equally between the two margins:

This div element is centered.

Example

Note: Center aligning has no effect if the width property is not set (or set to 100%).

Center Align Text

To just center the text inside an element, use text-align: center;

Example

Tip: For more examples on how to align text, see the CSS Text chapter.

Center an Image

To center an image, set left and right margin to auto and make it into a block element:

Example

Left and Right Align — Using position

One method for aligning elements is to use position: absolute; :

In my younger and more vulnerable years my father gave me some advice that I’ve been turning over in my mind ever since.

Example

Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.

Left and Right Align — Using float

Another method for aligning elements is to use the float property:

Example

The clearfix Hack

Note: If an element is taller than the element containing it, and it is floated, it will overflow outside of its container. You can use the «clearfix hack» to fix this (see example below).

Without Clearfix

With Clearfix

Then we can add the clearfix hack to the containing element to fix this problem:

Example

Center Vertically — Using padding

There are many ways to center an element vertically in CSS. A simple solution is to use top and bottom padding :

Example

To center both vertically and horizontally, use padding and text-align: center :

I am vertically and horizontally centered.

Example

Center Vertically — Using line-height

Another trick is to use the line-height property with a value that is equal to the height property:

I am vertically and horizontally centered.

Example

.center <
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
>

/* If the text has multiple lines, add the following: */
.center p line-height: 1.5;
display: inline-block;
vertical-align: middle;
>

Center Vertically — Using position & transform

If padding and line-height are not options, another solution is to use positioning and the transform property:

I am vertically and horizontally centered.

Example

.center <
height: 200px;
position: relative;
border: 3px solid green;
>

.center p margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
>

Tip: You will learn more about the transform property in our 2D Transforms Chapter.

Center Vertically — Using Flexbox

You can also use flexbox to center things. Just note that flexbox is not supported in IE10 and earlier versions:

Example

.center <
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
>

Tip: You will learn more about Flexbox in our CSS Flexbox Chapter.

Источник