Reputation: 9476

How can I horizontally center an element?

How can I horizontally center a <div> within another <div> using CSS?

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Upvotes: 5102

Answers (30)

Willem de Wit

Reputation: 8742

Chris Coyier who wrote an excellent post on 'Centering in the Unknown' on his blog. It's a roundup of multiple solutions. I posted one that isn't posted in this question. It has more browser support than the Flexbox solution, and you're not using display: table; which could break other things.

/* This parent can be any width and height */

#outer {
  text-align: center;
}


/* The ghost, nudged to maintain perfect centering */

#outer:before {
  content: '.';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0;
  overflow: hidden;
}


/* The element to be centered, can
       also be of any width and height */

#inner {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Upvotes: 57

kongaraju

Reputation: 9606

The modern box model with Flexbox

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

The old box model (deprecated)

display: box and its properties box-pack, box-align, box-orient, box-direction etc. have been replaced by flexbox. While they may still work, they are not recommended to be used in production.

#outer {
  width: 100%;
  /* Firefox */
  display: -moz-box;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-pack: center;
  box-align: center;
}

#inner {
  width: 50%;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

According to your usability you may also use the box-orient, box-flex, box-direction properties.

Read more about centering the child elements

And this explains why the box model is the best approach:

Why is the W3C box model considered better?

Upvotes: 457

Karteek Rakshit

Reputation: 49

Just make left property to 50% and subtract it by half of the div width

.main {
  background: grey;
  width: 20rem;
  color: white;
  left: 10rem;
  position: absolute;
}

.center-it {
  /* 50% - <(div width)/2>*/
  left: calc(50% - 10rem);
}

<div class="main center-it">
  <p class="title">success.</p>
</div>

Upvotes: -1

Miguel Leite

Reputation: 117

Well, I managed to find a solution that maybe will fit all situations, but uses JavaScript:

Here's the structure:

<div class="container">
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
</div>

And here's the JavaScript snippet:

$(document).ready(function () {
  $('.container .content').each(function () {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

If you want to use it in a responsive approach, replace $(document).ready by $(window).resize in the previous example.

Upvotes: 23

Kenneth P.

Reputation: 1816

You can do something like this

#container {
    display: table;
    height: /* height of your container */;
    width: /* width of your container */;
}

#inner {
    display: table-cell;
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
    width: /* width of your center div */;
}

This will also align the #inner vertically. If you don't want to, remove the display and vertical-align properties;

Upvotes: 30

Spurgeon Gnan Prakasham Tara

Reputation: 21

If you want to center an element horizontally you can do like this:

1. Method one: Using flexbox.

#outer{
    display: flex;
    justify-content: center;
}

If you want to align vertically center as well, just add align-items: center;. For this to work you need to give a certain height to the #outer.

#outer{
    display: flex;
    justify-content: center;
    height: 100vh;
    align-items: center;
}

2. Method 2: Using margin. For this method to work you need to give your #inner a certain width.

#inner {
  width: 50%;
  margin: 0 auto;
}

3. Method 3: Using (margin + translate). For this to work you need to give certain width to #inner.

#inner {
  width: 50%;
  margin-left: 50%;
  transform: translateX(-50%);
}

Upvotes: 1

Husain Ahmed

Reputation: 868

Use this code:

#inner {
   width: 50%;
   margin: 0 auto;
   text-align: center;
}

<div id="outer">
    <div id="inner">Foo foo</div>
</div>

Upvotes: 3

Kenzo_Gilead

Reputation: 2439

We could use the next CSS class which allows to center vertically and horizontally any element against its parent:

.centerElement {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

Upvotes: 2

Faizal

Reputation: 250

Use the below code.

#outer {
   text-align: center;
}

#inner {
   display: inline-block;
}

<div id="outer">
    <div id="inner">Foo foo</div>
</div>

Upvotes: 2

Yahya Essam

Reputation: 1912

You can use one line of code, just text-align: center;.

Here's an example:

#inner {
   text-align: center;
}

<div id="outer" style="width: 100%;">
    <div id="inner"><button>hello</button></div>
</div>

Upvotes: 3

Ali Hamza Yaseen

Reputation: 140

#outer {
   display: flex;
   width: 100%;
   height: 200px;
   justify-content: center;
   align-items: center;
}

Upvotes: 0

Krutik Raut

Reputation: 139

#outer {
   display: grid;
   place-items: center;
}

<div id="outer">
    <div id="inner">Foo foo</div>
</div>

Upvotes: 0

Vasyl Gutnyk

Reputation: 5039

Try the below example but the container should have a width, for example 100%.

button {
   margin: 0 auto;
   width: fit-content;
   display: block;
}

Upvotes: 0

Javed Khan

Reputation: 395

#inner {
   width: 50%;
   margin: 0 auto;
}

Upvotes: 1

Sankar

Reputation: 7117

Try margin: 0px auto;.

#inner {
   display: block;
   margin: 0px auto;
   width: 100px;
}

<div id="outer" style="width: 100%;">
    <div id="inner">Foo foo</div>
</div>

Upvotes: 1

user379888

Reputation:

#outer {
   width: 500px;
   background-color: #000;
   height: 500px;
}

#inner {
   background-color: #333;
   margin: 0 auto;
   width: 50%;
   height: 250px;
}

<div id="outer">
    <div id="inner"></div>
</div>

JSFiddle

Upvotes: 1

Gaurang Sondagar

Reputation: 834

You can do it in different ways. See the below examples.

First Method

#outer {
   text-align: center;
   width: 100%;
}

#inner {
   display: inline-block;
}

Second method

#outer {
   position: relative;
   overflow: hidden;
}
.centered {
   position: absolute;
   left: 50%;
}

Upvotes: 1

Friend

Reputation: 516

Add text-align:center; to parent <div>:

#outer {
   text-align: center;
}

JSFiddle

#outer > div {
   margin: auto;
   width: 100px;
}

JSFiddle

Upvotes: 1

sabban

Reputation: 131

#outer {
   display: grid;
   justify-content: center;
}

<div id="outer">
    <div id="inner">hello</div>
</div>

Upvotes: 2

Gaurav Aggarwal

Reputation: 10197

Just decide what width you want to give to the inner <div> and use the following CSS:

.inner {
   width: 500px; /* Assumed width */
   margin: 0 auto;
}

Upvotes: 2

Banti Mathur

Reputation: 39

Yes, this is short and clean code for horizontal alignment.

.classname {
   display: box;
   margin: 0 auto;
   width: 500px /* Width set as per your requirement. */;
}

Upvotes: 2

Justin Munce

Reputation: 307

Depending on your circumstances, the simplest solution could be:

margin: 0 auto; 
float: none;

Upvotes: 2

Majid Sadr

Reputation: 1081

#outer {
   position: relative;
}

#inner {
   width: 100px;
   height: 40px;
   position: absolute;
   top: 50%;
   margin-top: -20px; /* half of your height */
}

Upvotes: 2

Vishal Kardam

Reputation: 24

* {
   margin: 0;
   padding: 0;
}

#outer {
   background: red;
   width: 100%;
   height: 100vh;
   display: flex;
   /*center For  vertically*/
   justify-content: center;
   flex-direction: column;
   /*center for horizontally*/
   align-items: center;
}

#inner {
   width: 80%;
   height: 40px;
   background: grey;
   margin-top: 5px;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>horizontally center an element</title>
    </head>

    <body>
        <div id="outer">
            <div id="inner">1</div>
            <div id="inner" style="background: green;">2</div>
            <div id="inner" style="background: yellow;">3</div>
        </div>
    </body>
</html>

Upvotes: -1

mirazimi

Reputation: 878

.res-banner {
    width: 309px;
    margin: auto;
    height: 309px;
}

<div class="container">
    <div class="res-banner">
        <img class="imgmelk" src="~/File/opt_img.jpg" />
    </div>
</div>

Upvotes: -1

Chathuranga CPM

Reputation: 43

#outer {
    display: flex;
    align-items: center;
}

<div id="outer">
    <div id="inner">Foo foo</div>
</div>

Upvotes: -1

Isaac Sichangi

Reputation: 75

An element can be centered horizontally easing using the CSS Flexbox property.

#outer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

<div id="outer">
    <div id="inner">Foo foo</div>
</div>

Upvotes: -1

Riddhi Busa

Reputation: 134

For a horizontally centered <div>:

#outer {
    width: 100%;
    text-align: center;
}
#inner {
    display: inline-block;
}

<div id="outer">
    <div id="inner">Foo foo</div>
</div>

Upvotes: -1

A. Ravindu Silva

Reputation: 23

I think this will be a solution:

#outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

Both elements must be the same width to function separately.

Upvotes: -1

Billal BEGUERADJ

Reputation: 22804

This method also works just fine:

#outer { /*div.container*/
  display: flex;
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment   */
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

For the inner <div>, the only condition is that its height and width must not be larger than the ones of its container.

Upvotes: 41

How can I horizontally center an element?

Answers (30)

The modern box model with Flexbox

The old box model (deprecated)

Read more about centering the child elements

Related Questions