Как позиционировать элемент из центра - CSS

Для клиента мне нужно собрать абсолютный div слева от тела, содержащего рекламу. Единственный способ, которым я понял, как это сделать до сих пор, - создать абсолютный div. Проблема здесь в том, что в абсолютном позиционированном div есть черное пространство (которое является концом тела), и мне нужно, чтобы это "пространство желоба" обнимало страницу.

Чтобы учесть это, лучшим способом является установка этого количества пикселей в сторону от центра страницы. Я думал, что могу сделать это с помощью следующего кода:

position: absolute;
left:50%;
margin-right:500px;

Однако это просто держит div в центре страницы. Можно ли расположить абсолютный div от центра страницы?

Ответ 1

Если вы знаете ширину рекламы, вы можете сделать это:

position:absolute;
left:50%;
margin-left:-250px;
width:500px;

обратите внимание на отрицательный край-левый, который составляет половину ширины расположенного элемента

Ответ 2

Если вы хотите сосредоточить что-то и сохранить его отзывчивую ширину/высоту, вы можете использовать единицы просмотра и хорошую поддержку браузера

Установив ширину, высоту и поля элемента в единицах просмотра, вы можете центрировать его, не используя другие трюки.

Здесь этот прямоугольник имеет высоту 60vh и верхнее и нижнее поля 20vh, что добавляет до 100vh (60 + 2 * 20), что делает его всегда центрированным даже при изменении размера окна.

#rectangle{
    width: 60vw;
    height: 60vh;
    margin: 20vh auto;
}

Подробнее здесь

Ответ 3

Если это не фиксированная ширина, вы можете сделать:

position: absolute;
left: 20%;
top: 20%;
height: 60%;
width: 60%;

Доказательство здесь.

Ответ 4

Вы можете легко сделать это в CSS. Работа во всех основных браузерах

<style type="text/css">
    #outer{
        width:100%;
        height:250px;
        background:#232323;
        position:relative;
    }

    #inner{
        position:absolute;
        width:300px;
        height:200px;
        background:red;
        top:0;
        left:50%; /*Important*/
        margin:-150px; /* WIDTH/2 */
    }
</style>

<div id="outer">
    <div id="inner">
    </div>
</div>

Ответ 5

Вы можете сделать контейнер div в центре и поместить его в него так:

<style type="text/css">
#container {
    position: relative;
    left:50%;
    padding-right:500px;
}
#left {
    position:absolute;
    left:-500px;
}

</style>

<div id="container">
    <div id="left">a</div>
</div>

Ответ 6

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

MARKUP:

<div id="adbox">
    <div class="content">
        <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh  odio, sollicitudin vel sodales vel, dignissim sed lacus. Praesent sed  erat sed turpis gravida congue. Nulla facilisi. Nunc eros eros, auctor  et auctor in, tempor quis magna. Curabitur in justo libero.</a>
    </div>
</div>
<div id="main-content">
    <p>Curabitur iaculis, dolor eu interdum fermentum, mi mauris vulputate est,  tempus rhoncus leo dolor nec orci. Duis a ante augue. Suspendisse  potenti. Proin luctus ultrices ligula, ac luctus lorem pellentesque non.  Curabitur sit amet eros dui, quis laoreet felis.</p>
</div>

ТИП:

#adbox {
    width: 400px;
    height: 0px;
    position: relative;
    z-index: 0;
    margin: 0 auto;
}
#adbox .content {
    background: #EEE;
}
#main-content {
    width:300px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    background: #CCC;
}
#main-content p {
    padding: 0 5px;
}

Предупреждение IE: в IE <= 6 свойство height интерпретируется как любой другой браузер с min-height: вы можете захотеть добавить определенный стиль для исправления этой проблемы.

Или вы могли бы абсолютно позиционировать объявление и идти следующим образом: http://jsfiddle.net/bssxg/10/

#adbox { width: 400px; position: absolute; z-index: 0; top: 0; left: 50%; margin-left: -200px; }

(левая отрицательная маржа равна половине ширины рекламного блока)

Ответ 7

Это сделало бы трюк

.centered {
    //Assume image is 100 in height and 200 in width
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -50px; // applying a negative top margin of half the images height
    margin-left: -100px; // applying negative left margin of half the images width
}