让Div如何实现水平或垂直居中的相关方法

网络
有些时候，我们需要一种危机，来激发我们自身的潜能，唤醒我们内心深处被掩藏已久的人生激情，来实现人生的最大价值。这一秒不放弃，下一秒就有希望！

先来看一个最普通的实现示例：

创建一个新的html页面，

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
  5. <title>无标题文档</title>
  6. </head>
  7. <body>
  8. </body>
  9. </html>

在<head></head>中间，插入CSS代码

CSS Code复制内容到剪贴板
  1. #warp{
  2. position:absolute;
  3. width:500px;
  4. height:200px;
  5. left:50%;
  6. top:370px;
  7. margin-left:-250px;
  8. margin-top:-100px;
  9. }

在HTML代码里调用这个CSS

CSS Code复制内容到剪贴板
  1. <divid="warp">
  2. 　　<span>共计</span>
  3. 　　　　<span>71</span>
  4. 　　<span>条数据符合条件</span>
  5. </div>

显示如下：

相关问题

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

1、让层水平居中

CSS Code复制内容到剪贴板
  1. .className{
  2. width:270px;
  3. height:150px;
  4. margin:0auto;
  5. }

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

CSS Code复制内容到剪贴板
  1. .className{
  2. width:270px;
  3. height:150px;
  4. position:absolute;
  5. left:50%;
  6. top:50%;
  7. margin:-75px00-135px;
  8. }

将层设置为绝对定位，left和top为50%，这时候使用负外边距，负外边距的大小为宽高的一半。
3、在重置窗体的时候层依旧保持居中

JavaScript Code复制内容到剪贴板

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

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

以上就是让Div如何实现水平或垂直居中的相关方法。努力追求是修行，彻底放下也是修行；带着不要的心，做出最大的努力，能接受一无所有才能更勇敢热烈地追求，并在得到的那一刻感恩知足，即便再次失去亦是心满意足。更多关于让Div如何实现水平或垂直居中的相关方法请关注haodaima.com其它相关文章！

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例