CSS position &居中（水平，垂直）
css position是个很重要的知识点：
知乎Header部分：
知乎Header-inner部分：
position属性值：
fixed：生成绝对定位的元素，相对浏览器窗口进行定位（位置可通过：left,right,top,bottom改变）;与文档流无关，不占据空间（可能与其它元素重叠）
relative：生成相对定位的元素（相对于元素正常位置）（left，right，top，bottom）；relative的元素经常用作absolute的元素的容器块;原先占据的空间依然保留
absolute：生成绝对定位的元素（相对第一个已定位的父元素进行定位；若没有则相对<html>）（left,right,top,bottom）；与文档流无关，不占据空间（可能与其它元素重叠）
static：默认值。没有定位，元素出现在正常的文件流中（left,right,top,bottom,z-index无效！）
inherit：继承从父元素的position值
fixed示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>cascading style sheet</title>
<style>
#test{
width: 500px;
height: 100px;
position: fixed;
top: 0px;
left: 500px;
border: 1px solid burlywood;
background-color: #F2F2F2;
z-index: 2;
}
.test1{
margin-top: 100px;
}
.test1, .test2, .test3, .test4, .test5{
width: 200px;
height: 300px;
border: 1px solid black;
position: relative;
left: 500px;
background-color: gray;
}
</style>
</head>
<body>
<div id="test"></div>
<div class="test1">1</div>
<div class="test2">2</div>
<div class="test3">3</div>
<div class="test4">4</div>
<div class="test5">5</div> </body>
</html>
#test部分始终固定在上方，不发生移动。
relative示例：（原先占据的空间依然保留！）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>position:relative</title>
<style>
.test1, .test2, .test3{
width: 200px;
height: 200px;
border: 1px solid orange;
}
.test2{
border-color: black;
position: relative;
top:-100px;
left: 10px;
}
</style>
</head>
<body>
<div class="test1">this is part 1</div>
<div class="test2">this is part 2</div>
<div class="test3">this is part 3</div>
</body>
</html>
运行结果：（箭头所指这部分区域空间依然保留！！！）
凡是可能发生重叠的position属性，均能使用z-index!
- 没有指定z-index：代码后面的在上面（“后来者居上”）；
- z-index越大的在上面！
注意：当使用position或者float属性时，通常<body>要预设定义margin和padding。这样可以避免在不同的浏览器中出现差异！
如果省略<!DOCTYPE>声明，IE8及以下版本会在右侧增加17px的外边距！这似乎是为了滚动条预留的空间！所以，请始终设置<!DOCTYPE>声明！！！
布局之水平居中：
1.元素居中对齐（比如<div>）：
使用margin:0 auto;（上下margin为0，左右自动分配（居中！））！注意：此方法元素需设置width属性（除了width:100%）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>居中</title>
<style>
/* 预设置样式 */
body{
margin: 0;
padding: 0;
}
.test1{
border: 1px solid gold;
width: 150px;
height: 150px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="test1">this is test1</div>
</body>
</html>
2.图像居中对齐（先设置display:block;再margin:0 auto）；
3.文本居中对齐（text-align:center;）
4.左右对齐：（①position:absolute;再设置left或right属性值②float:left;或者float:right）
布局之垂直居中：
方法一：line-height：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>居中</title>
<style>
/* 预设置样式 */
body{
margin: 0;
padding: 0;
}
.test1{
border: 1px solid gold;
width: 150px;
height: 150px;
line-height: 150px;
}
</style>
</head>
<body>
<div class="test1">this is test1</div>
</body>
</html>
这个方法有一个缺陷，适用于：“只有一行话”。原理：就是块元素（div）高度有多高，（行高）line-height就有多高！
不止一行话：
方法二：使用padding：
这种方法不会有上面line-height的“缺陷”，原理：好像就是"撑开"来一样！（个人比较推荐！）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>居中</title>
<style>
/* 预设置样式 */
body{
margin: 0;
padding: 0;
}
.test1{
border: 1px solid gold;
width: 200px;
padding: 100px 0px;
text-align: center;
}
</style>
</head>
<body>
<div class="test1">this is test1 this is test1 this is test1 this is test1 this is test1 </div>
</body>
</html>
方法三：使用display:flex;align-items:center;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>居中</title>
<style>
/* 预设置样式 */
body{
margin: 0;
padding: 0;
}
.test1{
border: 1px solid gold;
width: 200px;
height: 200px;
display: flex;
align-items: center;
text-align: center;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="test1">this is test1 this is test1 this is test1 this is test1 this is test1 </div>
</body>
</html>
方法四：使用position和transform
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>居中</title>
<style>
/* 预设置样式 */
body{
margin: 0;
padding: 0;
}
.test1{
border: 1px solid gold;
width: 200px;
height: 200px;
position: relative;
}
.test1 p{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="test1"> <p>this is test1</p> </div>
</body>
</html>
CSS position &居中（水平，垂直）的更多相关文章
- 解读CSS布局之-水平垂直居
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...
- CSS 基础 例子 水平 & 垂直对齐
一.元素居中对齐 margin:auto 水平居中对齐一个元素(如 <div>),即div本身在容器中的对齐,用margin:auto,而且,需要设置 width 属性(或者设置 100% ...
- CSS 中的各种居中 (水平、垂直)
导读: CSS 的居中有水平居中和垂直居中,这两种居中又分为行内元素居中和块级元素居中.根据父.子元素的高度是否清楚,又会使得不同的居中用不同方法.本文就其中一些情况做下简单说明,以作笔记之用,仅供大 ...
- CSS 各类 块级元素 行级元素 水平 垂直 居中问题
元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 行级元素 一块级元素 1 水平居中: ( ...
- css3-7 如何让页面元素水平垂直都居中（元素定位要用css定位属性）
css3-7 如何让页面元素水平垂直都居中(元素定位要用css定位属性) 一.总结 一句话总结:元素定位要用css定位属性,而且一般脱离文档流更加好操作.先设置为绝对定位,上左都50%,然后margi ...
- CSS实现水平垂直同时居中的5种思路
× 目录 [1]水平对齐+行高 [2]水平+垂直对齐 [3]margin+垂直对齐[4]absolute[5]flex 前面的话 水平居中和垂直居中已经单独介绍过,本文将介绍水平垂直同时居中的5种思路 ...
- CSS实现水平垂直同时居中的6种思路
前面的话 水平居中和垂直居中已经单独介绍过,本文将介绍水平垂直同时居中的6种思路 水平对齐+行高 [思路一]text-align + line-height实现单行文本水平垂直居中 <style ...
- （前端）面试300问之（2）CSS元素居中【水平、垂直、2者同时居中】
一 仅水平居中 1 行内元素 1)给父元素添加 text-align:center 即可 <div class="parent"> <span class=&qu ...
- CSS 布局 - 水平 & 垂直对齐
CSS 布局 - 水平 & 垂直对齐 一.元素居中对齐 要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;. 设置到元素的宽度将防止它溢出到容器的边缘 ...
随机推荐
- 最全的MonkeyRunner自动化测试从入门到精通（2）
一.Python环境变量的配置 步骤一:在官网进行下载python安装包,官网下载的路径:https://www.python.org/,如图所示: 步骤二:下载完成后,双击安装包,进行如下安装的界面 ...
- java之获取资源文件
背景介绍 在java程序中有时我们需要加载项目中的某些资源文件(如:config.properties之类),以便获取里面的值,这样可以避免某些需要经常修改的数据硬编码入业务程序中 实现方式 实现这种 ...
- oracle序列的增、删、改、查及使用
----------------------------------------------------------------------创建序列:示例:CREATE SEQUENCE SEQ_SS ...
- push问题1
问题: $ git pushTo gitee.com:kekemuyu/xtpole.git ! [rejected] master -> master (fetch first)error: ...
- SQL Server的一些小问题
一.SQL Server远程调用失败 解决办法:在控制面板-程序和功能中卸载“Microsoft SQL Server 2012 Express LocalDB”,具体版本根据你安装的VS版本决定,我 ...
- install python in wine
wget http://www.kegel.com/wine/winetricks chmod +x winetricks ./winetricks 钩选msxml3就可以了. ___________ ...
- zabbix监控托管主机遇到问题
昨天监控公司的托管主机时发现监控不上,回想起来其实就是个小问题,分分钟能解决的事,排错的过程才是真正耗心费神的. 监控环境: A zabbix server: 192.168.17.110 serve ...
- Could not autowire. No beans of 'TbItemMapper' type found. less... (Ctrl+F1) Checks autowiring prob
Intellij Idea开发工具在@Autowired或者@Resource注入XxxMapper接口时报如下错误: Could not autowire. No beans of 'TbItemM ...
- InnoDB启用大内存页
在 Linux 操作系统上运行内存需求量较大的应用程序时,由于其采用的默认页面大小为 4KB,因而将会产生较多 TLB Miss 和缺页中断,从而大大影响应用程序的性能.当操作系统以 2MB 甚至更大 ...
- ros 运行rviz时出现 QXcbConnection: XCB error: 148 错误 解决方法
出现上述问题的原因: 1.由于使用了nvc远程控制下位机: 2.rviz是一个基于opengl开发的图形插件,需要使用理论的屏幕参数(thetis' screen),由于使用了teamviewer会导 ...