Question

我希望将所有div放在中心位置，这样当屏幕变小时，它会保持居中并且变得更小

代码示例：

#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/

Answer 2

如果您想要一个根据屏幕大小调整大小的响应式页面，则必须使用文本的div元素和em值的百分比。要使div个元素居中，请添加margin:0 auto;。

我剥离了你在那里所有的其他css东西，我留下了你需要的基本东西，以得到你想要的东西。你可以按照自己喜欢的方式设计它。

CLICK HERE FOR DEMO

#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;

}

Answer 3

我不确定我理解你的问题。请在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/

Answer 4

确保在CSS正文中使用margin:0 auto;：

body { 保证金：0自动; }

这是我的fiddle。

我更改了一些内容，而不是使用h1，h2等，我已将其更改为<span>。这意味着文本标签可以自由地用于普通文本和段落。

另外，我没有使用方格div，而是强调了你的名字。不幸的是，这改变了一些下划线的颜色，但如果你更喜欢使用div，你可以把它取出来。

此外，我还使用了百分比来根据窗口的大小来改变它。

在div中居中div并使文本变小以显示屏幕比例

4 个答案: