Центрирование DIV с полной ширины/высоты границы

Во-первых, вот jfiddle: https://jsfiddle.net/nuLyq28d/Центрирование DIV с полной ширины/высоты границы

То, что я пытаюсь сделать, это белая граница расширения на всю высоту экрана и центрирования содержимого внутри коробки , как по горизонтали, так и по вертикали. Фон будет меняться, так как это будет три изображения (вместо сплошного черного), изменяющиеся между собой. Таким образом, оставляя белую границу как часть реальных изображений, было бы странно. Я хочу, чтобы он был отделен от изображений.

<body id="home-page"> 
<main> 
    <div> 
     <p>Lorem ipsum dolor sit amet, duis eros posuere sit, volutpat nec massa sit a ac, amet pede eu justo, suspendisse adipiscing 
       viverra. Amet quisque, justo elit dui orci aliquam praesent, et condimentum nibh. Ultricies cubilia eu fringilla elementum 
       erat, arcu metus dictum id feugiat, ultricies interdum elementum, magna nec urna sit non condimentum a, massa tempus nibh. 
       Eros turpis in erat sed, adipiscing a molestie, eros arcu. Est at est nec augue</p> 
    </div> 
</main>

body#home-page 
{ 
background-color: #000000; 
} 

body#home-page main 
{ 
display: table; 
padding: 20px; 
width: 88%; 
border: 8px solid #FFF; 
margin: 20px; 
} 

body#home-page main div 
{ 
text-align: center; 
margin: 0 auto; 
vertical-align: middle; 
width: 50%; 
} 

body#home-page main div p 
{ 
font-size: 12px; 
color:#FFF; 
line-height: 1.4; 
letter-spacing: 1px; 
}

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

Я думаю, что мой единственный другой вариант на этом этапе - захватить высоту экрана через jQuery, а затем установить высоту основного на эту высоту. Но прежде, чем я, что мне было интересно, если есть способ сделать это с помощью CSS

источник

2015-05-29 rklitz

https://jsfiddle.net/nuLyq28d/2/ Вы близки. Я добавил 100% к телу и html, а также к контейнеру и установил главный div для отображения в виде таблицы. Это не идеально, но его dang закрыть CSS-решение – Vaune

Более близкое решение: https: // jsfiddle.net/nuLyq28d/3/ – Vaune

@Vaune_X - это второе решение, которое вы отправили с телом, html {height: calc (100% - 8px); } совместим в браузерах? – rklitz

Вертикальное выравнивание дружнее в хроме, следуя коду

height: 100%; display: flex; align-items: center;

Для .main DIV, box-sizing: border-box; добавил, так что мы можем использовать 100% ширина.

html, корпус потребность 100% высота.

Вот дополненная скрипку - https://jsfiddle.net/afelixj/nuLyq28d/7/

Пожалуйста, проверьте в хроме.

источник

2015-05-29 16:55:29

Надеется, что это будет работать ..: D испытаны в хроме, FireFox, Opera, то есть ..

body#home-page { 
 
\t background-color: #000000; 
 
} 
 
body#home-page main { 
 
\t left:0px; 
 
\t right:0px; 
 
\t bottom:0px; 
 
\t top:0px; 
 
\t position:absolute; 
 
\t display: table; 
 
\t border: 8px solid #FFF; 
 
\t margin: 20px; 
 
} 
 
body#home-page main div { 
 
\t text-align:center; 
 
\t margin:0 auto; 
 
\t vertical-align: middle; 
 
\t padding:20%; 
 
} 
 
body#home-page main div p { 
 
\t font-size: 12px; 
 
\t color:#FFF; 
 
\t line-height: 1.4; 
 
\t letter-spacing: 1px; 
 
}

<body id="home-page"> 
 
<main> 
 
    <div> 
 
     <p>Lorem ipsum dolor sit amet, duis eros posuere sit, volutpat nec massa sit a ac, amet pede eu justo, suspendisse adipiscing 
 
       viverra. Amet quisque, justo elit dui orci aliquam praesent, et condimentum nibh. Ultricies cubilia eu fringilla elementum 
 
       erat, arcu metus dictum id feugiat, ultricies interdum elementum, magna nec urna sit non condimentum a, massa tempus nibh. 
 
       Eros turpis in erat sed, adipiscing a molestie, eros arcu. Est at est nec augue</p> 
 
    </div> 
 
</main> 
 
</body>

источник

2015-05-29 18:02:47

Подобно двух других ответов, но без всех position:absolute;/display:flex; нонсенс (Этот ответ является кросс-браузер дружественных):

* { 
 
    box-sizing:border-box;  
 
} 
 
html, body { 
 
    height:100%; 
 
    width: 100%; 
 
    margin:0; 
 
} 
 
body#home-page { 
 
    background-color: #000000; 
 
    padding:20px; 
 
} 
 
body#home-page main { 
 
    display: table; 
 
    padding: 20px; 
 
    width: 100%; 
 
    border: 8px solid #FFF; 
 
    height:100%; 
 
} 
 
body#home-page main div { 
 
    text-align: center; 
 
    display: table-row; 
 
} 
 
body#home-page main div p { 
 
    display: table-cell; 
 
    font-size: 12px; 
 
    color:#FFF; 
 
    line-height: 1.4; 
 
    letter-spacing: 1px; 
 
    vertical-align: middle; 
 
}

<body id="home-page"> 
 
    <main> 
 
     <div> 
 
      <p>Lorem ipsum dolor sit amet, duis eros posuere sit, volutpat nec massa sit a ac, amet pede eu justo, suspendisse adipiscing viverra. Amet quisque, justo elit dui orci aliquam praesent, et condimentum nibh. Ultricies cubilia eu fringilla elementum erat, arcu metus dictum id feugiat, ultricies interdum elementum, magna nec urna sit non condimentum a, massa tempus nibh. Eros turpis in erat sed, adipiscing a molestie, eros arcu. Est at est nec augue</p> 
 
     </div> 
 
    </main> 
 
</body>

Я установил это:

* { 
    box-sizing:border-box;  
}

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

Затем мы просто укажем html и body, чтобы быть полным размером страницы и предоставить нашим элементам таблицу/таблицу.

источник

2015-05-29 18:19:42

Центрирование DIV с полной ширины/высоты границы

ответ

Смежные вопросы