Центрирование div внутри div и уменьшение размера текста до размера экрана

Вам нужно использовать новый трюк, который я обнаружил здесь, здесь есть больше трюков, ссылок ниже, но прежде чем все трюки позволят взглянуть на это демо: http://jsfiddle.net/h6253/9/

Кроме того, чтобы сделать его отзывчивым, вам нужно использовать свойство max/min-width.

Код:

div {
    height: 200px; background-color: rgb(0, 184, 255); color:white;
    font-family:sans-serif; padding:20px;
    min-width: 200px; max-width: 400px;
    margin: auto; 
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;    
}

Метод, который я использовал: http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

другие методы...

http://css-tricks.com/centering-in-the-unknown/

http://css-tricks.com/snippets/css/a-guide-to-flexbox/ (новый в css)

http://blog.themeforest.net/tutorials/vertical-centering-with-css/

Обязательно используйте margin:0 auto; в теле вашего CSS:

body {margin: 0 auto; } }

Вот моя скрипка.

Я изменил несколько вещей, например, вместо использования h1, h2 и т.д., Я изменил его на <span>. Это означает, что текстовые теги могут использоваться для обычного текста и абзацев.

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

Также я использовал проценты, чтобы заставить его меняться в зависимости от размера окна.

Я не уверен, что понимаю вашу проблему. Пожалуйста, выделите больше проблем в jsFiddle. Возможно, попробуйте абсолютное позиционирование:

HTML:

<div class="centered">
    <h1>Title 1</h1>
    <h2>Title 2</h2>
    <img src="http://placehold.it/250x100" />
</div>

CSS:

.centered {
    position: absolute;
    top: 20%; left: 20%; right: 20%; bottom: 20%;
}

Проверьте это здесь: http://jsfiddle.net/h6253/6/

Если вы хотите, чтобы изменчивая страница была изменена на основе размера экрана, вам нужно использовать проценты для элементов div и значений em для текста. Чтобы div элементы div вы добавляете margin:0 auto; ,

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

ЩЕЛКНИТЕ ЗДЕСЬ ДЛЯ ДЕМО

#first_section{
width:100%;
height:px;
border:1px solid black;
margin:0 auto;
min-width:320px;
}
#first_section_txt{
width:100%;
margin:0 auto;
text-align:center;
font-size:2em;
word-wrap:word-break;
font-family:'Source Code Pro', sans-serif;
}
#square{
width:95%;
height:4px;
border-top:10px solid black;
margin:0 auto;
}
img{
margin:0 auto;

}