如何让div在整个屏幕中垂直居中

原创 2016年08月29日 16:06:49

如图,若将中间登录页保持在垂直居中位置



css代码操作如下:

.container{
	width:100%;
	height:548px;
	top:50%;	
	position:absolute;
	margin:-274px 0px 0px 0px;
}

其中:top 表示距离顶端的距离, margin:-274px 是中间图片高度的一半。

这样设置就可以保证整个<div> 垂直居中。


版权声明:本文为博主原创文章,未经博主允许不得转载。

无固定高度的div垂直居中

无固定高度的div垂直居中 – CSS实现效果图如下:代码附上: ...
  • qq_16559905
  • qq_16559905
  • 2016年04月05日 14:47
  • 1122

经典面试题:如何让DIV水平和垂直居中

CSS让DIV水平居中 说明,本文中所指的DIV包括HTML页面中所有的元素。 让一个DIV水平居中,直接用CSS就可以做到。只要设置了DIV的宽度,然后使用margin设置边距0 auto,CS...
  • zxjiayou1314
  • zxjiayou1314
  • 2015年06月24日 21:36
  • 978

css 在未知高度的容器内让内容垂直居中

这就是未知高度的垂直居中问题。在ie6下我没办法让 t(图中灰色块)有100%的高度。于是基于vertical-align:middle的垂直居中方法就不管用了。这个写法用到了IeOnly的:writ...
  • sibang
  • sibang
  • 2014年08月21日 16:48
  • 724

css的div垂直居中的方法,百分比div垂直居中(推荐translate)

1. 固定高宽div垂直居中 .outer{ position: relative; width:100%; height:100%; } .inner{ posit...
  • zhuchunyan_aijia
  • zhuchunyan_aijia
  • 2017年01月23日 11:09
  • 1347

实现div里的img图片水平垂直居中

body结构 方法一: 将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align...
  • DreamFJ
  • DreamFJ
  • 2017年03月31日 09:53
  • 32571

如何让DIV水平和垂直居中三种方法

方法1 CSS实现水平和垂直居中要让DIV水平和垂直居中,必需知道该DIV得宽度和高度,然后设置位置为绝对位置,距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50...
  • summer7310
  • summer7310
  • 2015年09月27日 20:14
  • 2069

未知高度的div在父元素中水平垂直居中的方法

居中方法暂时找到两种: 1、父元素: 在父元素中使用: display: flex; justify-content: center; align-items: center; 这些属性,即可...
  • u012881878
  • u012881878
  • 2017年04月07日 10:20
  • 1791

css 文本和div垂直居中方法汇总

本文总结了垂直居中的各种方法,包括单行文本垂直居中、多行文本垂直居中以及div垂直居中,列出了多种情况对应的方法。读者可以根据实际需要选择合适的方法。...
  • u014607184
  • u014607184
  • 2016年07月04日 14:10
  • 22504

div水平垂直居中问题以及解决方法的兼容性

Ⅰ.绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中...
  • cyyax
  • cyyax
  • 2016年04月28日 10:18
  • 771

div内容垂直居中对齐

css垂直居中属性设置vertical-align: middle对div不起作用,例如: DIV垂直居中对齐 * { margin: 0; padding: 0; } html,...
  • ale2012
  • ale2012
  • 2016年03月25日 02:44
  • 1530
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何让div在整个屏幕中垂直居中
举报原因:
原因补充:

(最多只允许输入30个字)