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 ...
随机推荐
- C++ 模板基础
我们学习使用C++,肯定都要了解模板这个概念.就我自己的理解,模板其实就是为复用而生,模板就是实现代码复用机制的一种工具,它可以实现类型参数化,即把类型定义为参数:进而实现了真正的代码可重用性.模版可 ...
- spring boot之从零开始开发自己的网站
概述 首先要感谢两位大神,该项目的想法来源自tale和MyBlog,本项目的想法. 做了一些改造,增加了一些功能和一些代码的重构,并且更换了博客主题. 关于项目,对于开发的练手项目,能够工程化,严谨一 ...
- Kali Linux桥接模式配置DNS服务器
操作环境: 虚拟机操作系统: Kali Linux 2017.2 虚拟化软件: VMWare Workstation 14 pro 操作前的准备: 在设置里将Kali的上网模式设置成"桥接模 ...
- difference between collection and association mapping in mybatis 3
Mybatis处理“一对多”的关系时,需要用到associasion元素.处理”多对一“用collection元素来实现(这两个元素在之前mapper文件中提到过). 本例子中,假设一名User可以有 ...
- 激活IDEA 2017.3 mac版 2018.05.21亲测可用
本文激活方式不会导致IEDA打不开,可激活一年,最简便方式,只需要30秒. 1.修改hosts sudo vim /private/etc/hosts 在文件最后一行中添加: 0.0.0.0 acco ...
- SVN汉化教程2017.10.6
https://jingyan.baidu.com/album/b87fe19e95f5925219356853.html?picindex=4
- java基础学习周计划之2--面向对象
JAVA面向对象第一天一. 知识点:1. 类和对象二. 关键问题(理论):1. 简述什么是类.什么是对象2. 简述基本类型变量与引用类型变量赋值时的差别3. 简述null的含义三. 关键代码(操作): ...
- 【BZOJ 1002】: [FJOI2007]轮状病毒
题目大意:(略) 题解: 第一眼,这不是矩阵树裸体,看了看样例,心想3就有16,那100岂不是要上天…… 果然炸long long……emmmm该不会要打高精除吧……害怕,按照老师的话,不可能考高精除 ...
- 【强连通分量+概率】Bzoj2438 杀人游戏
Description 一位冷血的杀手潜入 Na-wiat,并假装成平民.警察希望能在 N 个人里面,查出谁是杀手. 警察能够对每一个人进行查证,假如查证的对象是平民,他会告诉警察,他认识的人, 谁是 ...
- dubbo+zookeeper的使用
我们讨论过Nginx+tomcat组成的集群,这已经是非常灵活的集群技术,但是当我们的系统遇到更大的瓶颈,全部应用的单点服务器已经不能满足我们的需求,这时,我们要考虑另外一种,我们熟悉的内容,就是分布 ...