整个页面所有元素垂直居中

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6     <style type="text/css">
 7         html,body
 8         {
 9             height:100%;
10             margin:0;
11         }
12         body
13         {
14             -webkit-align-items:center;
15             -ms-flex-align:center;
16             align-items:center;
17             display:-webkit-flex;
18             display:flex;
19         }
20     </style>
21 </head>
22
23 <body>
24     <div style="height:500px; width:400px; background-color:#095;margin-left:auto;margin-right:auto;">
25         aSDadasdASD
26         <BR/><BR/><BR/><BR/><BR/><BR/>
27         342532523543
28         <BR/><BR/><BR/><BR/><BR/><BR/>
29     </div>
30 </body>
31 </html>

时间： 2024-12-20 17:10:16

整个页面所有元素垂直居中的相关文章

关于浮动元素垂直居中的问题

两种浮动元素垂直居中的情况: 父盒子有宽高; 父盒子没有宽高下面时 HTML 中的代码: 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>浮动元素垂直居中</title> 6 </head> 7 <body> 8 <div class="pare

网页元素居中攻略记_(2)元素垂直居中

单行内元素垂直居中方案设置行内元素的行高等于父元素的高度或者包裹块的高度即可实现垂直居中,具体看代码效果代码实现 index.html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>单行内元素垂直居中</title> <style> div { width: 200px; height

这里介绍实现元素垂直居中的方式,文章是参考了<css制作水平垂直居中对齐>这一篇文章. 1.行高和高度实现这种方式实现单行垂直居中是很简单的,但是要保证元素内容是单行的,并且其高度是不变的,只要将“line-height”和“height”设置成一样的就可以了.这种方式局限性在于只有单行文本的元素才适用,多行元素是不适用的. html代码: <div class="vertical"> <span>aaa</span>content &

实现元素垂直居中的方法(补充)

之前发过一次<实现元素垂直居中的方法>的文章,今天又碰到了更简便的方法,就是利用transform属性,特别是当要居中的元素宽度,高度未知时非常好使,废话不多说,直接上demo: <!DOCTYPE html><html><head lang="zh-cn"> <meta charset="UTF-8"> <title>居中的方法</title> <style

详解html5增强页面的元素

HTML5 增强页面的元素,包含 figure.figcaption.details.summary.mark.progress.meter.ol.dl.cite 和 small 元素.这些元素都是起到一些辅助作用,比如:figure元素,它主要作用类似于展示一个作品集,图片(包含图片,图片说明,图片标题).具体我们以下来详细学习HTML5这些增强页面的元素. figure元素与figcaption元素 figure元素最常用的地方就是来展示图片,这里的图片包含图片说明,图片标题已经图片本身.一

让浮动元素垂直居中

让容器中设置为浮动的元素垂直居中: 在父元素上进行设置: <style type="text/css"> #demo { width: 300px; height: 200px; background-color: grey; display: table-cell; vertical-align: middle; } .fl { float: left; width: 50px; height: 50px; background-color: black; } </

css-实现元素垂直居中对齐

原文:css-实现元素垂直居中对齐 css-实现元素/元素内容,垂直居中对齐一.单行内容的垂直居中(line-height:行高方法) 只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置 line-height 和 height,并使两值相等,就可以了. 缺点:1:这种方法局限性太大,只有单行文本的元素才适用,所以在多行元素中是不能使用这种方法的了. 2 :IE中不支持<img>等的居中. 优点:适合在所有浏览器,没有足够空间时,内容不会被切掉,同时支持块级和内联元

jQuery使用之（三）处理页面的元素

对于页面的元素,在DOM编程中可以通过各种查询.修改手段进行管理,非常麻烦.jQuery提供了一整套的方法来处理页面的元素.包括元素的内容.复制.移动和替换等.本节将介绍一些常用的内容. 1.直接获取.编辑内容. 在jQuery中,主要是通过html()和text()两个方法来获取和编辑页面的内容.其中html()相当于获取节点的innerHTML属性,添加参数html(text),则为设置innerHtml;而text()则用来获取元素的纯文本,text(content)为设置纯文本. 这两种

父子页面之间元素相互操作(iframe子页面)

js/jquery获取iframe子页面中元素的方法: 一.使用window.frames["iframe的ID"]获取元素 window.onload = function() { var oIframe = window.frames["oIframe"].document.getElementById("getFrame"); console.log(oIframe); } 注意:此处一定要加上window.onload或者DOMConte