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元素的 ...
随机推荐
- HTTP权威指南-连接管理
现在已经开始学习到第四章咯,坚持就是胜利哟~!ok,废话少说,继续写笔记. 本章中我们要介绍到HTTP的连接.好,现在有几个问题,我列出来了,带着这几个问题,我们进入本章的学习. 1.HTTP是如何使 ...
- （转）js jquery.qrcode生成二维码 带logo 支持中文
场景:公司最最近在开发二维码支付业务,所以需要做一个html5中的二维码生成和部署! 前天用js生成二维码,节省服务器资源及带宽 原版jquery.qrcode不能生成logo,本文采用的是修改版 1 ...
- JavaSE的基础语法之标识符：
标识符(掌握) (1)就是给类,接口,方法,变量等起名字的字符序列 (2)组成规则: A:英文大小写字母 B:数字 C:$和_ (3)注意事项: A:不能以数字开头 B:不能是java中的关键字 C: ...
- ASPCMS改造中
10月中旬的时候,芹芹大神给我接了个做网站的活,一番商量过后,我以低得说出来丢人TT的价格接了.主要是想借此摸清网站制作的一条龙服务. 目前根据ASPCMS开源管理系统,做了个大致的构架,下面上草图: ...
- servlet之注册登录（简写）
1.注册页面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEn ...
- 初学Python（四）——set
初学Python(四)——set 初学Python,主要整理一些学习到的知识点,这次是set. # -*- coding:utf-8 -*- #先来看数组和set的差别 d=[1,1,2,3,4,5] ...
- 蓝桥杯比赛关于 BFS 算法总结方法以及套路分析
首先我们来看几道java A组的题目,都是同一年的哦!!! 搭积木 小明最近喜欢搭数字积木,一共有10块积木,每个积木上有一个数字,0~9. 搭积木规则:每个积木放到其它两个积木的上面,并且一定比下面 ...
- 【整理】01. Fiddler 杂记
抓手机包步骤: Tools -- Fiddler Options -- Connections (默认)Fiddler listens on port:8888 (勾选)Allow remote co ...
- Qt之对话框消失动画
一.效果展示 最近做了一个提示框消失的功能,觉着挺有意思,以前一直以为Qt子窗口不能做淡出效果,其实Qt的淡出功能已经帮我们封装好了,我们仅仅只需要几行代码就可以做出酷炫的窗口关闭效果,写此篇文章的时 ...
- python 分支语句 循环语句
分支语句 #if-else if a > b: print('aaa') else: print('bbb') #if-elif-else if a > b: print('a>b' ...
- div+css 布局技巧总计