html - 将 div 在 div 中居中并使文本变小以适应屏幕比例

Question

我想将所有的 div 居中，这样当屏幕变小时它会保持居中并且只会变小

这是 fiddle 链接: http://jsfiddle.net/h6253/1/

代码示例:

#first_section {
   width: 0 auto;
   height: 776px;
   font-family: 'Raleway', sans-serif;



}

#square {
   width: 857px;
   height: 4px;
   background-color: #2a2d2f;
   margin-bottom: 10px;
}

#first_section_txt {
   position: relative;
   width: 997px;
   height: 164px;
   margin-left: 500px;
   margin-top: 251px;
}

.clear_both {
   clear: both;
}

h1 { font-family: 'Source Code Pro', sans-serif;
    font-weight: 500;
    font-size: 111px;
    display: inline;
    color: #4a4949;
     }
h2 { font-family: 'Source Code Pro', sans-serif;
    font-weight: 400;
    font-size: 111px;
    display: inline;
    color: #c0c0c0;
     }
h3 { font-family: 'Source Code Pro', sans-serif;
    font-weight: 200;
    font-size: 25px;
    display: inline;
    color: #a7a7a7;
    padding-left: 350px;
    top: 15px;
     }

     h3{
      text-shadow: 2px 2px 2px rgba(150, 150, 150, 0.37);
     }
#first_section img {
   position: relative;
   margin-left: 525px;
   width: 466px;
   height: 540px;
   margin-top: -150px;

}

Answer 1

您需要使用一个新技巧，我在这里发现了更多技巧，下面有链接，但在所有技巧之前让我们先看一下这个演示: 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/