css对齐方案总结
css对齐方案总结
垂直居中
通用布局方式(内敛元素和块状元素都适用)
利用flex:
核心代码:1
2
3
4
5.container{
display:flex;
flex-direction:column;
justify:center
}利用transformX(-50%):
核心代码:1
2
3
4
5
6
7
8
9
10
11
12.container{
width: 300px;
height: 300px;
background: red;
position:relative;
}
.child{
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
内敛元素的垂直居中
单行内敛元素:设置内敛元素的高度和行高相等
核心代码:
1 |
.container { |
块状元素
固定元素高度的块状元素
核心代码1
2
3
4
5
6
7
8
9.container{
position: relative;
}
.child{
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}未知高度的块状元素
当垂直居中的元素的高度和宽度未知时,我们可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。
核心代码:1
2
3
4
5
6
7
8.container {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
水平居中
通用布局方式
flex布局
核心代码:1
2
3
4.container{
display: flex;
justify-content: center;
}absoulte+transform
核心代码:1
2
3
4
5
6
7
8.container{
position:relative;
}
.child{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
内敛元素水平居中
- text-align:center
核心代码:1
2
3.container{
text-align:center
}
块状元素水平居中
使用 margin:0 auto 必须注明子元素和父元素的宽度
核心代码:1
2
3.container{
margin:0 auto
}多块状元素:
利用内敛元素布局方式container属性为text-align:center;
核心代码:1
2
3
4
5
6.container{
text-align: center;
}
.child{
display: inline-block;
}
水平垂直居中
固定宽高元素水平垂直居中
通过margin平移元素整体宽度的一半,使元素水平垂直居中。
核心代码:
1 |
.container { |
未知宽高元素水平垂直居中
利用2D变换,在水平和垂直两个方向都向反向平移宽高的一半,从而使元素水平垂直居中。
核心代码:1
2
3
4
5
6
7
8
9.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}利用flex布局
利用flex布局,其中justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式;而align-items属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。
核心代码:1
2
3
4
5.container {
display: flex;
justify-content: center;
align-items: center;
}
相对于 body 的水平垂直居中
列表布局(兼容性好)
核心代码:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
} .middle {
display: table-cell;
vertical-align: middle;
} .inner {
margin-left: auto;
margin-right: auto;
width: 400px;
}position 布局
核心代码1
2
3
4
5
6
7
8.container{
position: absolute;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
css对齐方案总结的更多相关文章
- webpack css压缩方案
css-loader原有的minimize选项在1.0.0版本已经移除,不能使用其进行css压缩. 目前可行的css压缩方案有: 1. postcss-loader with cssnano or u ...
- 最新CSS兼容方案
CSS兼容方案,让你的样式完美兼容各大浏览器,这个方案主要是用来解决Safari的,Opear是在测试的时候顺带试了一下,结果发现竟然也行,所以顺便也解决了. .e {/*FF OP*/ color: ...
- css对齐
2016-10-25 <css入门经典>第15章 1.text-align属性: 块属性内部的文本对齐方式.该属性只对块盒子有意义,内联盒子的内容没有对齐方式.(注意:只是盒子内部的内容对 ...
- CSS预编译与PostCSS以及Webpack构建CSS综合方案
CSS全称Cascading Style Sheets(层叠样式表),用来为HTML添加样式,本质上是一种标记类语言.CSS前期发展非常迅速,1994年哈肯·维姆·莱首次提出CSS,1996年12月W ...
- css垂直居中方案
先介绍几种常见的垂直布局方式: 已知盒子具体宽度(宽度可以为百分比)(适用于居中浮动元素) 第一种: 给父元素相对定位,给子元素绝对定位 父布局 { position: relative; } 子布局 ...
- 【css对齐】块内或者行内图片与文字居中对齐最靠谱的方式!
块内或者行内图片与文字居中对齐最靠谱的方式! 做图片与文字在一行的按钮时候最常用到,总结了一个靠谱的方法,终于可以完美的对齐下面给个代码 首先是html: <p class="btnU ...
- 聊一聊 React 中的 CSS 样式方案
和 Angular,Vue 不同,React 并没有如何在 React 中书写样式的官方方案,依靠的是社区众多的方案.社区中提供的方案有很多,例如 CSS Modules,styled-compone ...
- 全场景效能平台猪齿鱼常用的前端css实现方案
居中 最常用的height + line-height,以及margin:0 auto的居中方式就不再阐述,以下介绍两种容错性高的实现方案. flex布局实现 猪齿鱼前端日常开发中,我们多以f ...
- 猪齿鱼平台常用前端css实现方案
居中 最常用的height + line-height,以及margin:0 auto的居中方式就不再阐述,以下介绍两种容错性高的实现方案. flex布局实现 猪齿鱼前端日常开发中,我们多以fle ...
随机推荐
- Python(2)深入Python函数定义
Python学习 Part2:深入Python函数定义 在Python中,可以定义包含若干参数的函数,这里有几种可用的形式,也可以混合使用: 1. 默认参数 最常用的一种形式是为一个或多个参数指定默认 ...
- 可能是史上最全的机器学习和Python(包括数学)速查表
新手学习机器学习很难,就是收集资料也很费劲.所幸Robbie Allen从不同来源收集了目前最全的有关机器学习.Python和相关数学知识的速查表大全.强烈建议收藏! 机器学习有很多方面. 当我开始刷 ...
- eclipse下的tomcat配置https(最简单得配置https)
近期公司列出一大堆的东西,其中包括https,啥也不想说,你们是无法理解的苦逼的我的 本文不是双向认证, 双向认证需要让客户端信任自己生成的证书,有点类似登录银行网站的情,如果想知道双向认证的同志可以 ...
- String的split()方法可以将字符串按照特定的分隔符拆分成字符串数组
在java.lang包中有String.split()方法,返回是一个数组------不管按照什么拆,拆出来是一个数组 String str = "1,2,3,4,5,6"; St ...
- 构建基于Netty 的HTTP/HTTPS 应用程序
HTTP/HTTPS是最常见的协议套件之一,并且随着智能手机的成功,它的应用也日益广泛,因为对于任何公司来说,拥有一个可以被移动设备访问的网站几乎是必须的.这些协议也被用于其他方面.许多组织导出的用于 ...
- 提示“本地连接没有有效的ip配置-未修复“窗口
很多人在使用电脑时可能会遇到了这样一个网络问题,电脑无法连接网络,使用自带网络诊断工具诊断提示:"本地连接没有有效的ip配置".这种网络故障多数是出在使用路由器共享上网的windo ...
- golang接口三个特性
类型和接口 因为映射建设在类型的基础之上,首先我们对类型进行全新的介绍.go是一个静态性语言,每个变量都有静态的类型,因此每个变量在编译阶段中有明确的变量类型,比如像:int.float32.MyTy ...
- NOIP2013华容道 大爆搜
预处理出每个点周围四个点互相到达的最短路,再在整个图上跑SPFA,要记录路径 #include<cstdio> #include<cstring> #include<io ...
- BZOJ_2238_Mst_树剖+线段树
BZOJ_2238_Mst_树剖+线段树 Description 给出一个N个点M条边的无向带权图,以及Q个询问,每次询问在图中删掉一条边后图的最小生成树.(各询问间独立,每次询问不对之后的询问产生影 ...
- BZOJ_1433_[ZJOI2009]假期的宿舍_二分图匹配
BZOJ_1433_[ZJOI2009]假期的宿舍_二分图匹配 题意: 学校放假了······有些同学回家了,而有些同学则有以前的好朋友来探访,那么住宿就是一个问题.比如A 和B都是学校的学生,A要回 ...