Center Div Inside Another (100% Width) Div

Center Div inside another (100% width) div

.parent { text-align: center; }
.parent > .child { margin: 0 auto; width: 900px; }

Centering a div with a width of 100%?

if you want to just center a div within a container.Then you have style div within container as margin:0 auto; . Below is simple demonstration:

.container_{  width:100%;  height:700px;  background:green;}
.centreBox{  width:50%;  height:50%;  margin:0 auto;  background:red;}

<div class="container_">  <div class="centreBox">  </div></div>

How can I center a div within another div?

You need to set the width of the container (auto won't work):

#container {
    width: 640px; /* Can be in percentage also. */
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
}

The CSS reference by MDN explains it all.

Check out these links:

• auto - CSS reference | MDN
• margin - CSS reference | MDN
• What is the meaning of auto value in a CSS property - Stack Overflow

In action at jsFiddle.

CSS divs alignment inside div with 100% width

Inline elements are sensitive to white space in your code. Just remove it.

html{  margin:0;  padding:0;  width:100%;}body{  margin:0;  padding:0;  width:100%;}.container{  margin:0;  padding:0;  width:100%;  display:block;}.inner-div{  display:inline-block;  width:25%;}.yellow{  background-color:yellow;}.blue{  background-color:blue;}.red{  background-color:red;}.green{  background-color:green;}

<div class="container">  <div class="inner-div yellow">    yellow  </div><div class="inner-div blue">  blue  </div><div class="inner-div red">  red  </div><div class="inner-div green">  green  </div></div>

Can't horizontally center div inside another div

You need to make the buttons div take up the whole width so they will center properly. Add width: 100%; to .button-wrap.

/* Container4 Styling */
.container4 {  height: 100vh;  width: 100%;  margin: 0;  background-color: #CDE5E1;  text-align: center;}

/* Tab HP Styling */
.one {  height: 100vh;  width: 100%;  margin: 0;  background-color: red;  position: relative;}

/* Tab HP BUTTON Styling */
.content {  height: 100vh;  width: 100%;}
.button-wrap {  position: absolute;  bottom: 0;  width: 100%;}
a.button {  color: #fff;  text-decoration: none;  padding: 15px 50px;  display: inline-block;}
a.active {  color: black;  display: inline-block;}
div[class*="content-"] {  display: none;}
div.active {  display: inline-block;}

<div class="container4">
  <div class="content">    <div class="content-1 active one">      <h1>Content</h1>
      <div class="button-wrap">        <a href="#" class="button">Button1</a>        <a href="#" class="button">Button2</a>        <a href="#" class="button">Button3</a>        <a href="#" class="button">Button4</a>      </div>
    </div>
    <div class="content-2 two"> content 2 </div>
    <div class="content-2 three"> content 3 </div>
    <div class="content-2 four"> content 4 </div>
  </div>
</div>

How to properly center a 100% width div in css

JS Fiddle -> http://jsfiddle.net/ma3y77bt/

Here is the working HTML:

<div class="main-content">
    <div class="header">Header</div>
    <div class="body-content"></div>
    <div class="footer">Footer</div>
</div>

In order to have a fixed header and footer that span the width of the page, you first need to define the dimensions of the body container. To do so, simple apply the following:

html, body {
    position: relative;
    width: 100%;
    height: 100%;
}

Next, you can define the dimensions of the header. We use absolute positioning here to always make sure that the header is on top of all other elements.

.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
 }

** Also, by matching the height with the line-height, the content is also vertically aligned.

For the footer, we do the same except align it to the bottom of the page after the body content.

.footer {
    postion: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #999;
}

Please see the jsfiddle for an example

Center div inside a div

Use this CSS:

.produtos {
    width: 100%;
    background: gray;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
}

.caixa {
    width: 27.1%;
    height: 250px;
    background: darksalmon;
    border: 1px solid #000;
    float: left;
    margin: 0 3%;
}

How to align a div to the middle (horizontally/width) of the page

<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>

How to center a div inside another div

If the two divs got fixed dimensions, you can simply put a margin on the second div. In your case :

#div2 {
 margin: 25px;
}

Or, if the divs got variable dimensions, try :

#div1 {
 position: relative;
}
#div2 {
position:absolute;
left:50%;
top:50%;

transform: translate(-50%,-50%);

}

OR :

#div1 {
text-align: center;

}
#div2 {
display: inline-block;
vertical-align: middle;

}

That's all the way I know to achieve that :)

---

Related Topics