Как позиционировать элемент абсолютно из центра - CSS - PullRequest
Новая
       2

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

18 голосов
/ 16 декабря 2010

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

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

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

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

Ответы [ 7 ]

34 голосов
/ 16 декабря 2010

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

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

обратите внимание на отрицательное поле left, равное половине ширины позиционируемого элемента

3 голосов
/ 27 мая 2015

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

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

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

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

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

1 голос
/ 12 октября 2011

Вы можете легко сделать в 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>
1 голос
/ 16 декабря 2010

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

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

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

0 голосов
/ 06 сентября 2013

Это бы сработало 

.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
}
0 голосов
/ 16 декабря 2010

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

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>

STYLE: 

#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 *Свойство 1015 * интерпретируется как любой другой браузер с <code>min-height: возможно, вы захотите добавить какой-то определенный стиль для решения этой проблемы.

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

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

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

0 голосов
/ 16 декабря 2010

Вы можете сделать контейнер div в центре и поместить свой 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>
...