css设置div垂直居中

一开始想着直接对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" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="${pageContext.request.contextPath }/css/index.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath }/js/height.js"></script>
<title>首页</title>
</head>
<body><div class="page"><form action=""><table><tr><td></td><td><strong>用户登录</strong></td></tr><tr><td><label for="id">用户名：</label></td><td><input type="text" class="form-control" name="id" id="id"/></td></tr><tr><td><label for="pwd">密码：</label></td><td><input type="password" class="form-control" name="pwd" id="pwd"/></td></tr><tr><td></td><td><button type="submit" class="btn">登录</button></td></tr></table></form></div>
</body>
</html>

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;}

这里有几个要注意的点：
1.html 和 body 标签需要设置高度百分之百，并且将padding和margin清除，不然会有滚动条
2.div的position不能用默认的static，static是不能移动的，这里不需要使用absolute和fixed，因为relative是不会使元素脱离文档流的，absolute和fixed则会。所以这里使用relative就行了
3.这里的原理是想下移动父级div高度的50%，即top:50%
然后再将div向上移动它的高度的50%，即transform:translateY(-50%)，这样就实现了一个垂直居中的效果

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

$(document).ready(function(){
alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding marginalert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin})

css设置div垂直居中相关推荐

css设置div上下左右均居中、底部居中
css设置div或盒子居中 #垂直居中 #左右居中 #底部居中类型一:固定宽度高度 html代码 <div class="login_container"><d ...
css设置div不可编辑,css 怎么设置div不可点击
css设置div不可点击的方法:1.通过"event.preventDefault()"方法取消事件的默认动作:2.通过"event.stopPropagation()& ...
html内容超出不自动滚动,css设置div滚动条内容不超过就不显示
css设置div滚动条内容不超过就不显示实现内容不超出就不显示滚动条的效果,可以设置div的css样式为overflow:auto,当overflow取值为auto时,如果内容被修剪,则浏览器会显示 ...
html代码字号div style=,div字体大小设置 css设置div中字体大小尺寸样式
div字体大小设置 css设置div中字体大小尺寸样式设置篇在css div布局中常常对div字体大小设置,这篇ThinkCSS为大家介绍div中字体大小尺寸样式设置,通过直接在div标签加字体大小 ...
在HTML中让边框变透明,如何用CSS设置DIV边框透明
如何实现用CSS设置DIV边框为透明呢?我们来看一看. 工具/材料电脑操作方法 01 透明一般认为是一种颜色属性,但是并没有这个数值.我们找到了一种让div实现透明的最佳方案,运用RGBA 02 ...
HTML如何修改span里面的字体颜色,怎么用span css设置div内部分字体颜色？
本篇文章给大家带来的内容是关于怎么用span css设置div内部分字体颜色,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 用span标签设置div内放一段文字中的部分文字字体颜色方 ...
html圆点边框颜色,css设置div边框颜色
div边框色调 css设置装备摆设div边框色采使用css对div边框设置色采是思空见贯CSS花式设置装备摆设.对div边框颜色设置说需要css单词为border. 去领会干系教程:<CSS边 ...
html代码设置span字体颜色,怎么用span css设置div内部分字体颜色？
本篇文章给大家带来的内容是关于怎么用span css设置div内部分字体颜色,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 用span标签设置div内放一段文字中的部分文字字体颜色方 ...
div怎么在css中设置字体大小,div字体大小设置 css设置div中字体大小尺寸样式
div字体大小设置 css设置div中字体大小尺寸样式设置篇在css div布局中常常对div字体大小设置,这篇ThinkCSS为大家介绍div中字体大小尺寸样式设置,通过直接在div标签加字体大小 ...
css字体颜色span,怎么用span css设置div内部分字体颜色？
原文:http://www.php.cn/css-tutorial-413189.html 本篇文章给大家带来的内容是关于怎么用span css设置div内部分字体颜色,有一定的参考价值,有需要的朋友 ...

css设置div垂直居中

css设置div垂直居中相关推荐

最新文章

热门文章