How do you easily horizontally center a <div> using CSS?

user_64313 0
Viewed 1199252

I'm trying to horizontally center a <div> block element on a page and have it set to a minimum width. What is the simplest way to do this? I want the <div> element to be inline with rest of my page. I'll try to draw an example:

page text page text page text page text
page text page text page text page text
               -------
               | div |
               -------
page text page text page text page text
page text page text page text page text
css html
22 Answers

In most browsers this will work:

div.centre {
  width: 200px;
  display: block;
  background-color: #eee;
  margin-left: auto;
  margin-right: auto;
}
<div class="centre">Some Text</div>

In IE6 you will need to add another outer div:

div.layout {
  text-align: center;
}

div.centre {
  text-align: left;
  width: 200px;
  background-color: #eee;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
<div class="layout">
  <div class="centre">Some Text</div>
</div>

user_629510
Russ_Cam_18310 
.center {
   margin-left: auto;
   margin-right: auto;
}

Minimum width is not globally supported, but can be implemented using

.divclass {
   min-width: 200px;
}

Then you can set your div to be 

<div class="center divclass">stuff in here</div>
user_522010

CSS, HTML: 

div.mydiv {width: 200px; margin: 0 auto}
<div class="mydiv">
    
    I am in the middle
    
</div>

Your diagram shows a block level element also (which a div usually is), not an inline one.

Of the top of my head, min-width is supported in FF2+/Safari3+/IE7+. Can be done for IE6 using hackety CSS, or a simple bit of JS.

user_645910

Please use the below code and your div will be in the center.

.class-name {
    display:block;
    margin:0 auto;
}
user_78122120

Add this class to your css file it will work perfectly steps to do:

1) create this first

<div class="center-role-form">
  <!--your div (contrent) place here-->
</div>

2) add this to your css

.center-role-form {
    width: fit-content;
    text-align: center;
    margin: 1em auto;
    display: table;
}
user_83941350
Related