"35.172.217.40 - 35.172.217.40"

Почему мой оверлейный div не центрируется

Я уверен, что это "просто" для профессионалов:

Я теряюсь на том, как центрировать (горизонтально и вертикально) наложение на своего родителя. Для получения подробной информации см. Ссылку jsfiddle.

Заранее благодарю за ваше время...

ФУНТ

<div class="grandparent">
    <div class="parent">
        <!-- 1st row */ -->
        <div class="child">1-1</div>
        <div class="child">1-2</div>
        <div class="child">1-3</div>

        <!-- 2nd row */ -->
        <div class="child">2-1</div>
        <div class="child">2-2</div>
        <div class="child">2-3</div>

        <!-- 3rd row */ -->
        <div class="child">3-1</div>
        <div class="child">3-2</div>
        <div class="child">3-3</div>


        <div class="overlay">
            Overlaysdfds 
            line2sdf sdfdsf sdfsdf sfdsdf
            <P />line 3
         </div> 

    </div>


</div>   

и CSS:

<style>
.grandparent {
    posttion: relative;
    height: 100%;
    width:100%;
    max-width:600px;

    margin: 0 auto;
    text-align:center;
    border: 1px solid green;
    overflow: hidden;
}

.parent {
    width: 75%;
    height: 75%;
    margin: auto;
    border: 1px solid blue;
    text-align: center;
    padding:20px;
    verflow:hidden;
}
.parent:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.child {
    posttion: relative;
    float:left;
    width: 30%;
    padding-bottom: 22%; 
    margin:1.66%;
    background-color: #1E1E1E;
    color: #ffffff;
}

.overlay {
    position:absolute;
    top:50%;
    left:50%;
    margin-left: -150px;
    margin-top:-100px;
    color: white; background: #666666; opacity: .8;
    z-index: 1000;
}
<style>

Вот ссылка на пример

http://jsfiddle.net/lb6688/aj7udvsq/3/

Опять же, оцените свое время !!!

+1
источник поделиться
2 ответа

Используйте transform:translate(-50%, -50%) чтобы transform:translate(-50%, -50%) элемент внутри родителя (вместо жестких значений кодирования для margin-top и margin-left):

.overlay {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    color: white; background: #666666; opacity: .8;
    z-index: 1000;
}

Посмотрите, как он работает здесь: http://jsfiddle.net/aj7udvsq/4/

+3
источник

Посмотрите на изменения в CSS: http://jsfiddle.net/csdtesting/w4boh5mg/1/

.overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);    
    max-width: 50%;
    text-align: center;
    border: 1px solid blue;
    color: white; background: #666666; opacity: .8;
}

  .parent {
    position: relative; /* or absolute */
    margin: 5%;
    width: 80%;
    height: 500px;
    border: 1px solid red;
}
0
источник

Посмотрите другие вопросы по метке или Задайте вопрос