这篇文章上次修改于 2275 天前,可能其部分内容已经发生变化,如有疑问可询问作者。
样式重置
首先,我们创建一个新页面,先在 “Head” 标签加入 “style” 标签,以开始键入我们的第一个 CSS 属性。
<style>
body{
margin: 0;
padding: 0;
}
</style>
上面的代码帮我们去除了 body 自身的内间距和外间距,这样就不会影响到我们稍后布置的页面内容啦~
开始编写
随后我们就可以开始进入今天的正题了。
首先我们先给页面新建一个 DIV,例如这样:
<div class="div1">
<p>世界,你好!</p>
</div>
然后添加一段 CSS 属性:
.div1{
width: 500px; /* 500像素的宽度 */
height: 300px; /* 300像素的高度 */
overflow: auto; /* 防止框架内容的溢出*/
background: #3CC; /* 蓝色的背景 */
}
就实现了这样一个简单的 DIV 框架了。
由于我们要想办法让“DIV1”全局居中,在这里我个人建议在“DIV1”的外面再新建一层 DIV,用于控制它的位置。这样的 DIV,大多数人称做“Container”。
<div class="container">
<div class="div1">
<p>世界,你好!</p>
</div>
</div>
然后给“Container”添加一段 CSS,让他显示在页面50%的位置。
.container{
top: 50%; /* 上边为窗口50%的位置 */
left: 50%; /* 左边为窗口50%的位置 */
position: absolute; /* 绝对定位 */
}
随后问题来了,为什么框架整体好像往右下角偏移了?
内容偏移了?
因为我们采用的是 Absolute 绝对定位,网页和 DIV 框架都是以左上角为对其点,所以你看到的框架就会有偏移现象。那么我们该如何让它“偏移回来”呢?
仔细看效果图你会发现,如果以“DIV1”的左上角为准,这个点的位置正好是这个页面的中心位置。
所以我们让“DIV1”往回偏移一半的大小,就可以让它完全居中显示了。具体做法是这样:
.container{
top: 50%;
left: 50%;
position: absolute;
margin-top: -150px; /* 往上偏移150像素,也就是DIV1高度的一半大小(DIV1的高度是300像素)*/
margin-left: -250px; /* 往左偏移250像素,也就是DIV1宽度的一半大小(DIV1的宽度是500像素)*/
}
随后我们看到的页面就是全局居中的效果了。
其他实现方案
当然,下面还有很多种方法均可以实现相同的效果。不过他们之间的区别,主要体现就是对浏览器的兼容性有所不同。
Calc 计算方法
还有一种方法是用 CSS3 的 calc 函数,例如这样写:
.container{
position: absolute;
top: calc(50% - 150px); /* 上边为窗口50%的位置,并往上偏移150像素 */
left: calc(50% - 250px); /* 左边为窗口50%的位置,并往左偏移250像素 */
}
PS:运算符的左右两侧必须包含空格符。只能写成 “ - ” 而不是 “-”。
值得注意的是,calc 函数不兼容一些使用老旧标准的浏览器,例如臭名远扬的 IE 系列。
自动外间距方法
下段方法于 17.02.26 补充,这样给子元素设置就可以全局居中了,还不需要给父元素(.container)设置任何属性...
.div1{
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 500px;
height: 300px;
overflow: auto;
background: #3CC;
position: absolute;
}
运行地址:https://jsfiddle.net/3saj7r8L
Flex 方法
下段方法于 17.11.29 补充,还可以用 Flex 弹性盒子模型的方法设置居中,代码还更简单,不过不太兼容老旧浏览器。
body{
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
position: absolute;
align-items: center;
justify-content: center;
}
没错,子元素不需要设置宽度和高度就能自动适应。
运行地址:https://jsfiddle.net/3saj7r8L/1/
细化页面
最后我们再把这个页面细化,可以将其做的更加美观。
当然,你也可以做的比我这个更好看。
如果对本文有什么疑问,欢迎在这里评论和我交流~
没有评论