Центрируйте DIV до центра страницы независимо от размера экрана

Я хочу центрировать нижний контейнер div, чтобы сайт отображался в центре страницы, независимо от размера экрана.Центрируйте DIV до центра страницы независимо от размера экрана

http://penarthpc.com/~droneboy/

Я играл немного, но, кажется, что-то не хватает.

источник

2013-08-29 dan4duk

_ независимо от размера экрана_ Если в нем есть мобильные телефоны, используйте ** Media Queries **. – Nitesh

Опубликовать некоторые HTML/CSS, иначе никто не знает, в чем проблема ... –

посмотрите на это: http://www.yourinspirationweb.com/ru/css-tips-how-to-center-an-element/ – medBo

.center-div { 
    width: 600px; 
    height: 600px; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -300px; 
    margin-top: -300px; 
}

Это центрирование DIV с классом center-div по горизонтали и по вертикали. margin-left должен быть отрицательной половиной от вашей ширины. margin-top должен быть отрицательной половиной высоты.

Чтобы просто центрирования по горизонтали:

.center-div { 
    width: 600px; 
    height: 600px; 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
}

источник

2013-08-29 12:28:09 FastTrack

Самый простой способ центрирования что-то, независимо от ширины страницы является margin: auto; в вашем CSS, с высотой и шириной, определяемой.

.class { 
    height: 50px; 
    width: 50px; 
    margin: auto; 
}

JSFiddle: http://jsfiddle.net/rVXBH/

источник

2013-08-29 12:32:14 Tricky12

Решение этой проблемы является использование auto для margin в CSS и обеспечивая некоторую ширину в самой DIV:

div.centered { 
margin-left:auto; 
margin-right:auto; 
width:80%; 
}

источник

2013-08-29 12:35:32

Вот отличный метод я использую , он использует перед селектором для создания невидимого div, который заботится о вертикальном выравнивании:

HTML:

<body> 
    <div id="outter-div"> 
     <div id="aligned"> 
      <h1>A Nice Title</h1> 
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p> 
     </div> 
    </div> 
</body>

CSS:

/* This parent can be any width and height */ 
#outter-div { 
    text-align: center; 
} 

/* The ghost, nudged to maintain perfect centering */ 
#outter-div:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -0.25em; /* Adjusts for spacing */ 
} 

/* The element to be centered, can 
    also be of any width and height */ 
#aligned{ 
    display: inline-block; 
    vertical-align: middle; 
    width: 300px; 
}

Это можно найти на this post, который также имеет демо на jsbin!

источник

2013-08-29 12:40:23 fditz