div 가운데 넣기

The complete guide to centering a div

source : http://www.tipue.com/blog/center-a-div/

[Centering a div in a page, basic]

This method works with just about every browser, ever.

CSS

.center-div

{

     margin: 0 auto;

     width: 100px; 

}

[centering a div within a div, old-school]

This method works with just about every browser.

CSS

.outer-div

{

     padding: 30px;

}

.inner-div

{

     margin: 0 auto;

     width: 100px; 

}

HTML

<div class="outer-div"><div class="inner-div"></div></div>

[Centering a div within a div with inline-block]

With this method the inner div doesn't require a set width. It works with all browsers.

CSS

.outer-div

{

     padding: 30px;

     text-align: center;

}

.inner-div

{

     display: inline-block;

     padding: 50px;

}

HTML

<div class="outer-div"><div class="inner-div"></div></div>

[Centering a div within a div, horizontally and vertically]

This uses the margin auto trick to center a div both horizontally and vertically. It works with every browser.

CSS

.outer-div

{

     padding: 30px;

}

.inner-div

{

     margin: auto;

     width: 100px;

     height: 100px;  

}

HTML

<div class="outer-div"><div class="inner-div"></div></div>

[Centering a div at the bottom of a page]

This uses margin auto and an absolute-positioned outer div. It works with all browsers.

CSS

.outer-div

{

     position: absolute;

     bottom: 30px;

     width: 100%;

}

.inner-div

{

     margin: 0 auto;

     width: 100px;

     height: 100px;

     background-color: #ccc;

}

[Centering a div in a page, horizontally and vertically]

This uses margin auto again and an absolute-positioned outer div. It works with all browsers.

CSS

.center-div

{

     position: absolute;

     margin: auto;

     top: 0;

     right: 0;

     bottom: 0;

     left: 0;

     width: 100px;

     height: 100px;

}

[Centering a div in a page, responsive]

The width of the div is responsive, in that it responds to the size of the viewport. It works with just about every browser.

CSS

.center-div

{

     margin: 0 auto;

     max-width: 700px;

}

HTML

<div class="outer-div"><div class="inner-div"></div></div>

[centering a div within a div, inner div responsive]

The inner div is responsive. Works with all browsers.

CSS

.outer-div

{

     padding: 30px;

}

.inner-div

{

     margin: 0 auto;

     max-width: 700px; 

}

HTML

<div class="outer-div"><div class="inner-div"></div></div>

Centering two responsive divs, side by side

Two divs side by side, and both responsive. Works with every browser.

CSS

.container

{

     text-align: center;

}

.left-div

{

     display: inline-block;

     max-width: 300px;

     vertical-align: top;

}

.right-div

{

     display: inline-block;

     max-width: 150px;

}

@media screen and (max-width: 600px) 

{

     .left-div, .right-div

     {

          max-width: 100%;

     }

}

HTML

<div class="container"><div class="left-div"></div><div class="right-div"></div></div>

[Flexbox, div centered]

This centers a div both horizontally and vertically using Flexbox. The CSS3 Flexible Box Layout Module, aka Flexbox, aims to provide a CSS box model for user interface design.

Flexbox is supported by Chrome 49+, IE11 and Microsoft Edge, Firefox 37+, Safari 9.1+, Opera 40+, Safari iOS 9.3+, Android 4.4+ and Chrome for Android 53+.

CSS

.container

{

     display: flex;

     align-items: center;

     justify-content: center;

     height: 100vh;

}

.item

{

     background-color: #f3f2ef;

     border-radius: 3px;

     width: 200px;

     height: 100px; 

}

HTML

<div class="container"><div class="item"></div><div>