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

一、水平居中

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. fastclick插件学习(一)之用法

    原理 在检测到touchend事件后, 会通过dom自定义事件模拟一个click事件,并把浏览器300ms之后真正触发的点击事件屏蔽掉,fastclick是不会对PC浏览器添加监听事件 使用 1.引入 ...

  2. kubernetes 集群内部访问外部的数据库endpoint

    k8s访问集群外独立的服务最好的方式是采用Endpoint方式,以mysql服务为例: 创建mysql-service.yaml apiVersion: v1 kind: Service metada ...

  3. 判断两个list是否元素一样

    首先创建枚举 public enum TheType { type1 = , type2 = , type3 = } 1.如果不考虑顺序,即顺序不一样,只要元素都一样即可 List<TheTyp ...

  4. Google自动打印

    浏览器打印功能,有很多小伙伴可能不太清楚,这里我们可以学习一下. 情景:开发一个需要打印小票的项目.(在订单页里,给客户添加一个打印的操作) 1.假设打印机已经连接好了 2.我们这一节用的浏览器是Go ...

  5. ESP8266 AT指令

    无线网络名称 ESP_XXXXXX,后面的数字是MAC地址后几位 应用模式: AT+CWMODE? //查询 AT+CWMODE=<mode> //设置(重启后生效).1-Station模 ...

  6. 10.Spring整合Hibernate_3_HibernateTemplate

    将sessionFactory 注入给 hibernateTemplate,让hibernateTemplate帮我们完成一些模板代码 <!-- 使用HibernateTemplate --&g ...

  7. C# PDF 填值 填充数据

    看效果图   /// <summary> /// 赛事结果PDF /// </summary> /// <param name="model"> ...

  8. Appium|Locator Strategy ... is not supported for this session

    appim server log InvalidSelectorError: Locator Strategy 'xpath,//android.widget.TextView[@resource-i ...

  9. java 使用POI导出百万级数据

    先看结果吧,这只是测试其中有很多因数影响了性能. 表总数为:7千多万,测试导出100万 表字段有17个字段 最终excel大小有60多兆 总耗时:126165毫秒 差不多2分多钟 其核心简单来说就是分 ...

  10. Linux内核的目录结构