网页布局 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
本人英语还没过四级，所以不能说是翻译把，只能说是按照自己的理解去叙述了一遍作者的意思，请各位多多指教。
译文内容：
改进的方法
针对这些问题的另一个类似的版本是让元素依然保持垂直方向上的定位方式，但是水平方向上设置 margin 为 auto 以达到我们的目的。这样子消除了文字在水平方向上的问题。请看改进的代码。
CSS 代码：
html,body{
height:100%;
margin:0;
padding:0;
}
body{
background:#eae7d7 url(images/vert-centre.jpg) repeat-x center center;
text-align:center;
min-width:626px;
min-height:400px;
}
#vertical{
position:absolute;
top:50%;
margin-top:-198px;/* half main elements height*/
left:0;
width:100%;
}
#hoz {
width:624px;
margin-left:auto;
margin-right:auto;
height:394px;
border:1px solid silver;
background:#666;
overflow:auto;/* allow content to scroll inside element */
text-align:left;
}
h1 {color:#fff;margin:0;padding:0}
HTML 代码：
<div id="vertical">
<div id="hoz">
<h1>Content goes here</h1>
</div>
</div>
你可以在 这里 看到实际的页面效果。
这样子达到了我们预期的一部分效果，但是在垂直方向上依然存在着问题，你可以在下图中看到：
相关文章
- 这篇文章主要介绍了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
最新评论