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

简介: 1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 3 4 5 无标题文档 6 7 html,...
 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>

 

 

相关文章
|
7月前
|
前端开发 JavaScript
css之伪类hover改变自身、子元素、其他元素的样式
css之伪类hover改变自身、子元素、其他元素的样式
136 0
|
7月前
【奇技淫巧】实现flex布局中,单独某个元素挪到右侧、底部,与其他元素排列不同,就像是个另类。(主要是用到margin-left和align-self)
【奇技淫巧】实现flex布局中,单独某个元素挪到右侧、底部,与其他元素排列不同,就像是个另类。(主要是用到margin-left和align-self)
|
5月前
|
前端开发
css实战——清除列表中最后一个元素的下边距
css实战——清除列表中最后一个元素的下边距
94 0
|
6月前
|
Web App开发 前端开发 JavaScript
如何隐藏一个元素的滚动条
如何隐藏一个元素的滚动条
177 0
|
7月前
|
前端开发 容器
css样式元素的相对定位,绝对定位,固定定位等元素定位运用技巧详解
css样式元素的相对定位,绝对定位,固定定位等元素定位运用技巧详解
元素居中的几种方式
元素居中的几种方式
71 0
【元素水平垂直居中的方法有哪些?元素不定宽高呢?】
【元素水平垂直居中的方法有哪些?元素不定宽高呢?】
【元素水平垂直居中的方法有哪些?元素不定宽高呢?】
元素水平垂直居中的六种方法
元素水平垂直居中的六种方法
98 1
div盒子水平垂直居中以及表格的居中的方法
div盒子水平垂直居中以及表格的居中的方法
153 0