在CSS中水平居中和垂直居中:完整的指南
这篇文章将会按照如下思路展开:
一、水平居中
1. 行内元素水平居中
2. block元素水平居中
3. 多个块级元素水平居中
二、垂直居中
1. 行内元素水平居中
2. block元素水平居中
3. 用flexbox
三、水平和垂直居中
1.元素是都有定宽定高
2.元素宽高不定
3.用flexbox
了解了文章的架构,就让我们追条击破!
一、水平居中
1. 行内元素水平居中
.center-children {
text-align: center;
}
该方法适用于inline, inline-block, inline-table, inline-flex
2. block元素水平居中
.center-me {
margin: 0 auto;
}
3. 多个块级元素水平居中
如果有两个或更多的块级元素需要在一行中水平居中,那么可能会更好地使它们成为不同的显示类型。 这里有一个使它们inline-block和flexbox的例子:
.inline-block-center {
text-align: center;
display:inline-block;
}
或
.flex-center{
display:flex;
justify-content:center;
}
结果如图
如果有多个块级元素堆叠在彼此的顶部,在这种情况下,auto margin就很好。
main div {
background: black;
margin: 0 auto;
color: white;
padding: 15px;
margin: 5px auto;
}
结果如图:
二、垂直居中
1. 行内元素垂直
1.1 单独一行
它们的上和下有相等的padding
.link {
padding-top: 30px;
padding-bottom: 30px;
}
如果padding由于某种原因不是一个选项,并且你试图居中一些nowrap的文本,有一个窍门是使line-height等于文本高度。
.center-text-trick {
height: 100px;
line-height: 100px;
white-space: nowrap;
}
1.2 多行
上下padding相等同样适用。但有时文本是table cell 就不适用了。但是我们还有法宝,vertical-align可以解决这个问题。
.center-table {
display: table;
height: 250px;
background: white;
width: 240px;
margin: 20px;
}
.center-table p {
display: table-cell;
margin:;
background: black;
color: white;
padding: 20px;
border: 10px solid white;
vertical-align: middle;
}
或者 flex大神
//这是父元素
.flex-center-vertically {
display: flex;
justify-content: center;
flex-direction: column;
height: 400px;
}
注意,只有父容器具有固定高度(px,%等),这才是真正相关的,这就是为什么这里的容器有一个高度。
如果这两种技术都出来了,你可以使用“ghost element”技术,其中全高度伪元素被放置在容器内,文本与该元素垂直对齐。
.ghost-center {
position: relative;
}
.ghost-center::before {
content: " ";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.ghost-center p {
display: inline-block;
vertical-align: middle;
}
2. block元素垂直居中
2.1 元素高度已知
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}
2.2 元素高度未知
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
3.用flexbox
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
三、水平和垂直居中
1.元素是都有定宽定高
.parent {
position: relative;
} .child {
width: 300px;
height: 100px;
padding: 20px; position: absolute;
top: 50%;
left: 50%; margin: -70px 0 0 -170px;
}
2.元素宽高不定
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3.用flexbox
.parent {
display: flex;
justify-content: center;
align-items: center;
}
四、结论
在CSS中水平居中和垂直居中:完整的指南的更多相关文章
- CSS中设置DIV垂直居中的N种方法 兼容IE浏览器
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- CSS中水平居中的方法
居中是我们在css中经常遇到的问题,一般有水平居中.垂直居中.垂直水平居中这3种情况,那么今天首先就来对学习到的水平居中的方法做个总结笔记. css水平居中 text-align:center 它的效 ...
- CSS中设置div垂直居中
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- CSS的水平居中和垂直居中解决方案
在写CSS样式的时候,有时为了美观,会添加水平居中和垂直居中,这时候你有可能会遇到很棘手的问题,有些水平居中和垂直居中的属性添加上去完全没反应,下面给大家列举一些CSS水平居中和垂直居中的终极解决方案 ...
- 主流 CSS 布局(水平居中、垂直居中、居中 )
什么是布局 html 页面的整体结构或骨架 布局不是某个技术内容 而是一种设计思想 [ 布局方式 ] 水平居中布局 垂直居中布局 居中布局( 水平 + 垂直 ) 什么是水平居中布局 水平居中布局 元素 ...
- CSS中水平居中设置的几种方式
1.行内元素: 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的. <body> <div class="t ...
- 【CSS】水平居中和垂直居中
水平居中和垂直居中 2019-11-12 15:35:37 by冲冲 1.水平居中 (1)父级元素是行内元素,子级元素是行内元素,子级元素水平居中 ① 设置父级元素为块级元素 display:bl ...
- css中的左右垂直居中的问题,可兼容各种版本浏览器的写法
如题分为垂直居中,左右居中,先挑简单的记录. 一.左右居中 1.我刚开始写代码的时候,老师就直接告诉我一个简单的方法,那就是: width:500px; height:200px; margin:0 ...
- CSS:水平居中与垂直居中
CSS居中算是一个比较基础的问题,在实际运用中,需要考虑到的一般是两种情况,一种是主要是表现为文字,图片等行内元素的居中,一种是指 div 等块级标签元素的居中. 水平居中 1.行内元素 行内元素(主 ...
随机推荐
- fastclick插件学习(一)之用法
原理 在检测到touchend事件后, 会通过dom自定义事件模拟一个click事件,并把浏览器300ms之后真正触发的点击事件屏蔽掉,fastclick是不会对PC浏览器添加监听事件 使用 1.引入 ...
- kubernetes 集群内部访问外部的数据库endpoint
k8s访问集群外独立的服务最好的方式是采用Endpoint方式,以mysql服务为例: 创建mysql-service.yaml apiVersion: v1 kind: Service metada ...
- 判断两个list是否元素一样
首先创建枚举 public enum TheType { type1 = , type2 = , type3 = } 1.如果不考虑顺序,即顺序不一样,只要元素都一样即可 List<TheTyp ...
- Google自动打印
浏览器打印功能,有很多小伙伴可能不太清楚,这里我们可以学习一下. 情景:开发一个需要打印小票的项目.(在订单页里,给客户添加一个打印的操作) 1.假设打印机已经连接好了 2.我们这一节用的浏览器是Go ...
- ESP8266 AT指令
无线网络名称 ESP_XXXXXX,后面的数字是MAC地址后几位 应用模式: AT+CWMODE? //查询 AT+CWMODE=<mode> //设置(重启后生效).1-Station模 ...
- 10.Spring整合Hibernate_3_HibernateTemplate
将sessionFactory 注入给 hibernateTemplate,让hibernateTemplate帮我们完成一些模板代码 <!-- 使用HibernateTemplate --&g ...
- C# PDF 填值 填充数据
看效果图 /// <summary> /// 赛事结果PDF /// </summary> /// <param name="model"> ...
- Appium|Locator Strategy ... is not supported for this session
appim server log InvalidSelectorError: Locator Strategy 'xpath,//android.widget.TextView[@resource-i ...
- java 使用POI导出百万级数据
先看结果吧,这只是测试其中有很多因数影响了性能. 表总数为:7千多万,测试导出100万 表字段有17个字段 最终excel大小有60多兆 总耗时:126165毫秒 差不多2分多钟 其核心简单来说就是分 ...
- Linux内核的目录结构