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元素的 ...
随机推荐
- HDU 6040---Hints of sd0061(STL)
题目链接 Problem Description sd0061, the legend of Beihang University ACM-ICPC Team, retired last year l ...
- 【MYSQL】主从库查看及搭建
show slave status 查看从库信息 http://blog.csdn.net/lxpbs8851/article/details/7898716 搭建主从库 http://www. ...
- HTML5 开发APP(MUI的一些特性)
先附mui文档地址:http://dev.dcloud.net.cn/mui/ui/ .mui的UI组件比较简单而且在文档中很好找就不过多说了. 1 在app开发中,使用HTML5+的api,必须m ...
- Swift 细节
1.swift ?和 !的区别 1.1 Swift语言使用var定义变量,但和别的语言不同,Swift里不会自动给变量赋初始值,也就是说变量不会有默认值,所以要求使用变量之前必须要对其初始化.如果在使 ...
- 如何让Oracle释放undo表空间
如何让Oracle释放undo表空间 最佳答案 在日常的数据库维护和数据库编程中经常会遇到犹豫对大数据量做DML操作后是得ORACLE的undo表空间扩展到十几个G或者几十个G 但是这些表空间 ...
- poj 3253 Fence Repair 优先队列
poj 3253 Fence Repair 优先队列 Description Farmer John wants to repair a small length of the fence aroun ...
- 七、vue中v-for有时候对页面不会重新渲染，数组变化后如何到渲染页面
v-for不能进行双向数据绑定,页面渲染完成后,再次更改v-for遍历的数据,js里面打印的数据看到数据值已经更改,但是页面的数据就是没有渲染,这是为什么呢? vue中v-for和angularj ...
- 深入了解IAT原理
---------------------------编辑时突然死机自动保存也没有用真的痛苦回头补上------------------ 输入表中的这些间接跳转是无法正常运行的,因为在正常情况,操作系 ...
- 【机器学习笔记之六】Bagging 简述
本文结构: 基本流程 有放回抽样的好处 Bagging 特点 sklearn 中 Bagging 使用 Bagging 和 Boosting 的区别 bagging:bootstrap aggrega ...
- shell 编程之函数
shell 函数的定义和普通的c语言函数定义差不多 function(){ } shell 函数的返回值,可以显示的return 语句,如果没有return 那么就会把最后一条语句的执行结果作为返回 ...
- div+css 布局技巧总计