CSS布局技巧大全
单列布局
水平居中
- 父元素text-align:center;子元素：inline-block;
- 优点：兼容性好；
- 不足：需要同时设置子元素和父元素
<!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>水平居中1</title>
<style>
.parent {
width: 500px;
height: 400px;
background: red;
text-align: center;
}
.child {
display: inline-block;
width: 300px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
- 子元素margin:0 auto;
- 优点：兼容性好
- 缺点：需要指定宽度
<!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>水平居中1</title>
<style>
.parent {
width: 500px;
height: 400px;
background: red;
}
.child {
width: 300px;
height: 100px;
background: blue;
margin:0 auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
- 子元素{display:table;margin:0 auto;}
- 优点:只需要对自身进行设置
- 不足:IE6,7需要调整结构
<!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>水平居中1</title>
<style>
.parent {
width: 500px;
height: 400px;
background: red;
}
.child {
width: 300px;
height: 100px;
background: blue;
margin:0 auto;
display:table;margin:0 auto;s
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
- 父元素：relative；子元素：absolute；left:50%;margin-left:-宽度的一半
- 优点：兼容性好
- 缺点：需要知道子元素的宽度
<!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>水平居中1</title>
<style>
.parent {
width: 500px;
height: 400px;
background: red;
position: relative;
top: 0;
left: 0;
}
.child {
width: 300px;
height: 100px;
background: blue;
position: absolute;
top: 0;
left: 50%;
margin-left: -150px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
- 父元素：relative；子元素：absolute；left:50%;transform:translate(-50%,0);
- 优点：兼容性差
- 缺点：不需要知道子元素的宽度
<!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>水平居中1</title>
<style>
.parent {
width: 500px;
height: 400px;
background: red;
position: relative;
top: 0;
left: 0;
}
.child {
width: 300px;
height: 100px;
background: blue;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%,0);
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
- 弹性盒子：父元素：display:flex;justify-content: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>水平居中1</title>
<style>
.parent {
width: 500px;
height: 400px;
background: red;
display: flex;
justify-content: center;
}
.child {
width: 300px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
垂直居中
- vertical-align: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>水平居中1</title>
<style>
.parent {
width: 500px;
height: 400px;
background: red;
display:table-cell;
vertical-align:middle;
}
.child {
width: 300px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
<!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>垂直居中1</title>
<style>
.parent {
width: 500px;
height: 400px;
background: red;
vertical-align:middle;
line-height:450px;
}
.child {
width: 300px;
height: 100px;
background: blue;
display:inline-block;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
<!-- 这种方法需要知道父元素和子元素的高度，父元素的line-height的值为父元素高度减去子元素高度的一半。-->
- 父元素：position:relative;子元素：positon:absolute;top:50%;transform:translate(0,-50%);
<!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>垂直居中1</title>
<style>
.parent {
width: 500px;
height: 400px;
background: red;
position: relative;
top: 0;
left: 0;
}
.child {
width: 300px;
height: 100px;
background: blue;
position: absolute;
top: 50%;
left:0;
transform: translate(0,-50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
父元素：position:relative;子元素：positon:absolute;top:50%;margin-top:-子元素高度的一半;
父元素：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>垂直居中1</title>
<style>
.parent {
width: 500px;
height: 400px;
background: red;
display: flex;
align-items: center;
}
.child {
width: 300px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
水平垂直居中
- 父元素：display:table-cell;vertical-align:middle;text-align:center;
子元素；display:inline-block;
<!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>垂直居中1</title>
<style>
.parent {
width: 500px;
height: 400px;
background: red;
display:table-cell;
vertical-align:middle;
text-align:center;
}
.child {
width: 300px;
height: 100px;
background: blue;
display: inline-block;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
- 父元素：position:relative;
子元素：position:absoluteCSS布局技巧大全的更多相关文章
- div+css 布局技巧总计
一.css 样式 1.float 首先需要了解块级元素(block element).每个块级元素都默认占用一行,在同一行只能添加一个块元素(float 除外).块级元素一般可以嵌套块级元素或者行内元 ...
- emmet的html和css使用技巧大全
emmet html使用技巧大全 ! 初始化 >:后代+:兄弟^:向上*:乘法$:数字():分组#:id命名.:类命名 一.id,类命名p#infop.infoa[href=#] 二.后代:di ...
- css布局技巧
CSS用户界面样式 鼠标样式currsor li{ cursor:pointer: } 设置或检索在对象上移动鼠标指针采用何种系统预定义的光标形状 属性值 描述 default 默认 pointer ...
- CSS布局技巧之——各种居中
居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...
- HTML+CSS布局技巧及兼容问题【阅读季】
在IE6和IE7中,行高值必须大于字体的2px以上才能保证字体的完整显示或当作为链接时能显示下划线. IE6 下去掉 input等元素 的边框 border: 0 none; 所有浏览器都可以了 边框 ...
- Html和CSS布局技巧
单列布局水平居中 水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的 ...
- 史上最全Html与CSS布局技巧
单列布局水平居中水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的父 ...
- Html与CSS布局技巧
一.单列布局 1.水平居中:(注:下面各个实例中实现的是child元素的对齐操作,child元素的父容器是parend元素) 1-1:使用inline-block和text-align实现: .par ...
- Html利用CSS布局技巧
单列布局水平居中 水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的 ...
随机推荐
- Hibernate一对多实例
本文向大家介绍Hibernate实例一对多的情况,可能好多人还不了解Hibernate实例一对多,没有关系,下面通过一个实例来帮助您理解Hibernate实例一对多,希望本文能教会你更多东西. 先看由 ...
- eclipse 打包 jar 到 Linux上运行
1.选择需要打包的项目,右键 Export 2.选择Runnable JAR file,然后点击 Next 3.选择jar包运行的main类,以及定义jar包的名字,保存的地方 4.将 导出来的 ja ...
- JVM GC（整理）
1 GC类型 1 )YGC 一般情况下,当新对象生成,并且在Eden申请空间失败时,就好触发YGC ,堆Eden区域进行GC,清除非存活对象,并且把尚且存活的对象移动到Survivor区.然后整理S ...
- vue中watched属性
watched属性,vue中的观察属性,可用来监听一个值的变化 默认有两个参数,新值,旧值 data (){ return { currentCity: "深圳" } } watc ...
- 9.Spark Streaming
Spark Streaming 1 Why Apache Spark 2 关于Apache Spark 3 如何安装Apache Spark 4 Apache Spark的工作原理 5 spark弹性 ...
- Redis架构设计--客户端请求RedisServer时，server端持久化的部分操作
- 微信开发获取用户OpenID
第一次开发微信版网页,对最重要的获取微信OpenId,特此记录下来 1.首先得有appid和appsecret . public class WeiXin { public static string ...
- Linux 组配置文件（/etc/group）
一.概述 Linux 组配置(/etc/group)文件分为4个字段,分别为: 组名.组密码.GID和组成员. 二.示例 用户apple和banana的默认组为fruit. [root@titan ~ ...
- [机器学习] Apriori算法
适用场合 Apriori算法包含两部分内容:1,发现频繁项集 2,挖掘关联规则. 通俗地解释一下,就是这个意思:1.发现哪些项目常常同时出现 2.挖掘这些常常出现的项目是否存在“如果A那么B”的关系. ...
- Linux - 简明Shell编程14 - 操作符（Operator）
脚本地址 https://github.com/anliven/L-Shell/tree/master/Shell-Basics 示例脚本及注释 #!/bin/bash echo "No c ...
- div+css 布局技巧总计