如何让层水平垂直居中页面

发布于，归属于css ,jquery教程。 只剩下板凳啦！ 共有664人围观    

让一个层水平垂直居中是一个非常常见的布局方式，但在html中水平居中使用margin:0px auto;可以实现，但垂直居中使用外边距是无法达到效果的。（页面设置height:100%;是无效的），这里使用绝对定位+负外边距的方式来实现垂直居中，但同时要考虑页面重置大小的情况，需要使用js来修正。

请看demo：http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html

点此下载

示例逐层演示了让层水平垂直居中的过程。

1、让层水平居中

  1. .className{
  2.     width:270px;
  3.     height:150px;
  4.     margin:0 auto;
  5. }

使用margin:0 auto;让层水平居中，留意宽度可高度必不可少。

2、让层垂直居中

  1. .className{
  2.     width:270px;
  3.     height:150px;
  4.     position:absolute;
  5.     left:50%;
  6.     top:50%;
  7.     margin:-75px 0 0 -135px;
  8. }

将层设置为绝对定位，left和top为50%，这时候使用负外边距，负外边距的大小为宽高的一半。

3、在重置窗体的时候层依旧保持居中

  1. $(document).ready(function(){
  2.                           
  3. $(window).resize(function(){
  4.  
  5.   $('.className').css({
  6.    position:'absolute',
  7.    left: ($(window).width() 
  8.      - $('.className').outerWidth())/2,
  9.    top: ($(window).height()
  10.      - $('.className').outerHeight())/2
  11.   });
  12.        
  13.  });
  14.  
  15.  
  16. $(window).resize();
  17.  
  18. });

这里用到的jquery的方法。
resize()事件：当在窗体重置大小时触发。
outerWidth()：获取第一个匹配元素外部宽度（默认包括补白和边框）。

原文：http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/

（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

只剩下板凳了！

  1. Hiro

    我博客的Ajax加载最新tag、cat列表的弹框就是这样的原理。用了resize方法，然后重新设置css位置！！

同类