Basic css about making a div center aligned

Question

I just have a very quick question about making a div center aligned:

I have a container

#container {    
    width: 100%;
    margin: 0 auto; 
    max-width: 1300px !important;   
    background: #ccc;       
}

and a Header inside

#header{
    font-family: "Helvetica Neue";
    font-size: 13px;    
    height: 125px;
    width: 100%;
    max-width: 1300px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.9);
    z-index: 1000;
}

and a class inside the header

#header .inside{
    max-width: 80em;    
    margin: 0 auto; 
    position: relative;
    height: 90px;
    display: block;
}

the header is good in the responsive mode but the inside not remain center aligned in other resolutions. What css should i add to the file to make it center aligned in all resolutions?

Thanks

try to add into `#header` this css, `text-align:center;` . let see what happen. — rockStar, Feb 03 '14 at 15:36
You're on the right track for centering things, but it being responsive can be a pain in the ass! I found this article a while back that has really helped me understand center aligning for responsiveness! http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/ I hope it helps! — Ian Ryan Clarke, Feb 03 '14 at 15:23
Possible duplicate of [How to Vertical align elements in a div?](https://stackoverflow.com/questions/79461/how-to-vertical-align-elements-in-a-div) — Giannis Dallas, Aug 19 '19 at 15:51

score 0 · Answer 1 · answered Feb 03 '14 at 15:42

to center an element in fixed position with margin:auto; is not coherent since it is not in the flow anymore.

You can use a fixed container, full width and inside its flow , use like you do in <body> a container with a width and margin:auto;

http://codepen.io/anon/pen/cvids

<div id="container">
  <header id="header">
    <div class="maxwidthmarginauto">
    <div class="inside">
      inside header
    </div>
    </div>
  </header>
</div>

body {
  margin:0;
}
#container {    
  width: 100%;
  margin: 0 auto; 
  max-width: 1300px;   
  background: #ccc;
  /* demo purpose */
  min-height:1500px;
  background:linear-gradient(to bottom, gray,lightgray);
}
header{
  font-family: "Helvetica Neue";
  font-size: 13px;    
  height: 125px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;    
  z-index: 1;
}
div.maxwidthmarginauto {
  max-width: 1300px;   margin: 0 auto;
  background: rgba(255, 255, 255, 0.9);

}
header .inside{
  max-width: 80em;    
  margin: 0 auto; 
  position: relative;
  height: 90px;
  background:rgba(0,50,100,0.7);

}

/* see them all */
body * {box-shadow:inset 0 0 0 2px red;border-radius:15px;}
body *:before {
  content:attr(class)'  'attr(id);
  position:absolute;
  background:yellow;
  z-index:2;
  margin:2.5em;
}

score 0 · Answer 2 · answered Feb 03 '14 at 16:37

0

I've experienced problems centering containers using "max-width".

The only solution I found, was use "width" attribute instead.

answered Feb 03 '14 at 16:37

danvitoriano

1,181
10
12

Basic css about making a div center aligned

2 Answers2