这篇文章将会按照如下思路展开:

一、水平居中

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中水平居中和垂直居中:完整的指南的更多相关文章

  1. CSS中设置DIV垂直居中的N种方法 兼容IE浏览器

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  2. CSS中水平居中的方法

    居中是我们在css中经常遇到的问题,一般有水平居中.垂直居中.垂直水平居中这3种情况,那么今天首先就来对学习到的水平居中的方法做个总结笔记. css水平居中 text-align:center 它的效 ...

  3. CSS中设置div垂直居中

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  4. CSS的水平居中和垂直居中解决方案

    在写CSS样式的时候,有时为了美观,会添加水平居中和垂直居中,这时候你有可能会遇到很棘手的问题,有些水平居中和垂直居中的属性添加上去完全没反应,下面给大家列举一些CSS水平居中和垂直居中的终极解决方案 ...

  5. 主流 CSS 布局(水平居中、垂直居中、居中 )

    什么是布局 html 页面的整体结构或骨架 布局不是某个技术内容 而是一种设计思想 [ 布局方式 ] 水平居中布局 垂直居中布局 居中布局( 水平 + 垂直 ) 什么是水平居中布局 水平居中布局 元素 ...

  6. CSS中水平居中设置的几种方式

    1.行内元素: 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的. <body> <div class="t ...

  7. 【CSS】水平居中和垂直居中

    水平居中和垂直居中 2019-11-12  15:35:37  by冲冲 1.水平居中 (1)父级元素是行内元素,子级元素是行内元素,子级元素水平居中 ① 设置父级元素为块级元素 display:bl ...

  8. css中的左右垂直居中的问题,可兼容各种版本浏览器的写法

    如题分为垂直居中,左右居中,先挑简单的记录. 一.左右居中 1.我刚开始写代码的时候,老师就直接告诉我一个简单的方法,那就是: width:500px; height:200px; margin:0 ...

  9. CSS:水平居中与垂直居中

    CSS居中算是一个比较基础的问题,在实际运用中,需要考虑到的一般是两种情况,一种是主要是表现为文字,图片等行内元素的居中,一种是指 div 等块级标签元素的居中. 水平居中 1.行内元素 行内元素(主 ...

随机推荐

  1. 6. Java基本数据类型

    Java 基本数据类型 变量就是申请内存来存储值.也就是说,当创建变量的时候,需要在内存中申请空间. 内存管理系统根据变量的类型为变量分配存储空间,分配的空间只能用来储存该类型数据. 因此,通过定义不 ...

  2. 浅谈Promise原理与应用

    在JavaScript中,所有代码都是单线程.由于该“缺陷”,JavaScript在处理网络操作.事件操作时都是需要进行异步执行的.AJAX就是一个典型的异步操作 对于异步操作,有传统的利用回调函数和 ...

  3. element ui的照片墙 默认显示照片

    参考地址: element ui的照片墙 默认显示照片 照片显示的数据格式是:[{name: '', url: ''}],:file-list=""默认显示的图片 实际项目开发中需 ...

  4. 关于rtos中任务切换时的程序流程

    今天和一个小伙伴讨论了一下基于cortex-m3内核的RTOS在任务切换时的程序流程,小伙伴说国内某搜索引擎都搜不到这类的信息,所以我才打算写下来,硬件平台是stm32f1​. 这里的切换有两种情况: ...

  5. PendSV异常介绍、用于上下文切换

    在这里,非常感谢<cortex-cm3权威指南>的翻译者. PendSV 的典型使用场合是在上下文切换时(在不同任务之间切换). 例如, 一个系统中有两个就绪的任务,上下文切换被触发的场合 ...

  6. 使用Response下载(支持任何格式)

    使用Response下载 下面代码: protected void Button2_Click(object sender, EventArgs e) { Response.ContentType = ...

  7. C - Calculation 2 HDU - 3501 (欧拉)

    Given a positive integer N, your task is to calculate the sum of the positive integers less than N w ...

  8. Is there a difference between `==` and `is` in Python?

    is will return True if two variables point to the same object, == if the objects referred to by the ...

  9. 【CodeForces】915 G. Coprime Arrays 莫比乌斯反演,前缀和,差分

    Coprime Arrays CodeForces - 915G Let's call an array a of size n coprime iff gcd(a1, a2, ..., *a**n) ...

  10. layui多图上传实现删除功能

    在使用layui的多图上传时发现没有删除功能 在网上搜索解决办法时有的感觉太复杂有的不符合自己所需要的所以就自己动手 下面附上代码 HTML: <div class="layui-up ...