网页布局 CSS简单实现垂直居中
互联网 发布时间：2008-10-17 19:25:41 作者：佚名 
我要评论
我要评论英文原文：
http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/
中文译文：
http://www.12sui.cn/blog/71.html
本人英语还没过四级，所以不能说是翻译把，只能说是按照自己的理解去叙述了一遍作者的意思，请各位多多指教。
译文内容：
最终的版本
现在回到这个问题，我曾经用了一些 很复杂的方法 去解决，但是现在又一个更简单、稳健的方法，那就是用浮动去代替绝对定位。
我们设定页面上的第一个元素的高度为页面的 50%，然后将这个元素向上拉，所拉的距离等于我们要设定居中的元素的高度的一半。
这里是我们做出的修正：
CSS 代码：
#vertical{
float:left;
height:50%;
margin-top:-198px;/* half vertical height*/
width:100%;
}
HTML 代码：
<div id="vertical"></div>
<div id="hoz">
<h1>Content goes here</h1>
</div>
你可以在 这里 看到所展示的效果。
这里很重要的一部分就是我们使用了一个宽度为100%的 float 元素，当然我们要记得为它的下一个元素添加 clear:both; ,否则，一些浏览器将不能理解你的意思。如果这里我们不使用 float，那么文字依然会消失在我们的视线之外。
相关文章
- 这篇文章主要介绍了CSS实现子元素div水平垂直居中的示例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起2020-09-03
- 这篇文章主要介绍了css常用元素水平垂直居中方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习2019-08-09
- 本文给大家分享几种方法介绍css实现元素垂直居中的常用方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-01
- 作为前端攻城师，在制作Web页面时都有碰到CSS制作水平垂直居中，我想大家都有研究过或者写过，特别的其中的垂直居中，更是让人烦恼，下面这篇文章主要给大家汇总介绍了关于2017-09-12
- 这篇文章主要给大家介绍了css实现元素水平垂直居中的两种方式，文中给出了完整的示例代码供大家参考学习，对大家的学习或者工作具有一定的参考价值，有需要的朋友们下面来2017-04-23
- 对于页面上的块级元素，只须定宽及设置margin:auto 0;即可在垂直上居中，但对于浮动的元素垂直居中是无效的。那么我们如何来处理这个问题呢，今天我们来探讨下。2014-09-12
css3设置box-pack和box-align让div里面的元素垂直居中
只要设置元素的box-pack和box-align即可，这两个属性当前只有webkit和moz支持，要设置垂直居中的话只需要将这两个属性的值都设置为center即可，需要的朋友可以参考下2014-09-01html元素水平居中、垂直居中、水平垂直居中于其父级元素的方法
这篇文章主要介绍了html元素 水平居中、垂直居中、水平垂直居中于其父级元素的方法,需要的朋友可以参考下2014-04-08
这篇文章主要介绍了css实现元素垂直居中显示的7种方式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学2020-09-04
最新评论