css设置div垂直居中

css设置div垂直居中一开始想着直接对 div 用 margin top 50 就行了 但不知道为什么会移到很下面 margin top 12 5 才刚好居中 这个问题暂时还没有解决 这里介绍的方法是使用 top 和 transform 来实现 div 的一个居中 html 文件 lt pagelanguage java import java util pageEncoding UTF 8 gt lt

一开始想着直接对div用margin-top:50%就行了,但不知道为什么会移到很下面,margin-top:12.5%才刚好居中,这个问题暂时还没有解决。

这里介绍的方法是使用top和transform来实现div的一个居中。

html文件

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
   
    
     
      
      
      
     首页 
     
用户登录

css文件

html,body{width:100%;height:100%;padding:0;margin:0;}
.page{width:280px;height:215px;border:1px #CCCCCC solid;padding:20px 30px;margin:0px auto;font-size:15px;top:50%;transform:translateY(-50%);position:relative;}
.page td{padding:8px 3px;font-size: 13px;}
.page input{width:130px;height:20px;font-size:13px;}
.page button{font-size:13px;}

在寻找方法的时候,找了下怎么用jquery获取窗口的height,这里也和大家分享一下:

$(document).ready(function(){ alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度 alert($(document.body).height());//浏览器当前窗口文档body的高度 alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin alert($(window).width()); //浏览器当前窗口可视区域宽度 alert($(document).width());//浏览器当前窗口文档对象宽度 alert($(document.body).width());//浏览器当前窗口文档body的宽度 alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin }) 
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/221881.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月17日 下午5:04
下一篇 2026年3月17日 下午5:05


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号