一、水平居中

1.1 行内元素

.parent {text-align: center;
}
复制代码

1.2 块级元素

1.2.1 块级元素一般居中方法

.son {margin: 0 auto;
}
复制代码

1.2.2 子元素含 float

.parent{width:fit-content;margin:0 auto;
}.son {float: left;
}
复制代码

1.2.3 Flex 弹性盒子

1） flex 2012版

.son {display: flex;justify-content: center;
}
复制代码

2）flex 2009版

.parent {display: box;box-orient: horizontal;box-pack: center;
}
复制代码

1.2.4 绝对定位

1）transform

.son {position: absolute;left: 50%;transform: translate(-50%, 0);
}
复制代码

2）left: 50%

.son {postion: absolute;width: 宽度;left: 50%;margin-left: -0.5*宽度
}
复制代码

3）left/right: 0

.son {position: absolute;width: 宽度;left: 0;right: 0;margin: 0 auto;
}
复制代码

小结

以上是 CSS 水平居中的 8 种方法。

二、垂直居中

2.1 行内元素

.parent {height: 高度;
}.son {line-height: 高度;
}
复制代码

注：① 子元素 line-height 值为父元素 height 值。② 单行文本。

2.2 块级元素

2.2.1 行内块级元素

.parent::after, .son{display:inline-block;vertical-align:middle;
}
.parent::after{content:'';height:100%;
}
复制代码

适应 IE7。

2.2.2 table

.parent {display: table;
}
.son {display: table-cell;vertical-align: middle;
}
复制代码

优点

元素高度可以动态改变, 不需再CSS中定义, 如果父元素没有足够空间时, 该元素内容也不会被截断。

缺点

IE6~7, 甚至IE8 beta中无效。

2.2.3 Flex 弹性盒子

1）flex 2012版

.parent {display: flex;align-items: center;
}
复制代码

优点

内容块的宽高任意, 优雅的溢出。
可用于更复杂高级的布局技术中。

缺点

IE8/IE9不支持。
需要浏览器厂商前缀。
渲染上可能会有一些问题。

2）flex 2009版

.parent {display: box;box-orien: vertical;box-pack: center;
}
复制代码

优点

实现简单, 扩展性强。

缺点

兼容性差, 不支持IE。

2.2.4 绝对定位

1）transform

.son {position: absolute;top: 50%;transform: translate( 0, -50%);
}
复制代码

优点

代码少。

缺点

IE8不支持, 属性需要追加浏览器厂商前缀, 可能干扰其他 transform 效果, 某些情形下会出现文本或元素边界渲染模糊的现象。

2）top: 50%

.son {position: absolute;top: 50%;height: 高度;margin-top: -0.5高度;
}
复制代码

优点

适用于所有浏览器。

缺点

父元素空间不够时, 子元素可能不可见(当浏览器窗口缩小时,滚动条不出现时).如果子元素设置了overflow:auto, 则高度不够时, 会出现滚动条。

3）top/bottom: 0;

.son {position: absolute;top: 0;botton: 0;margin: auto 0;
}
复制代码

优点

简单。

缺点

没有足够空间时, 子元素会被截断, 但不会有滚动条。

2.2.5 Grid （新增~）

1）在网格容器上设置 align-items 或 align-content

.parent{display:grid;align-items:center;/*align-content:center;*/
}

2）在网格项目中设置 align-self 或者 margin: auto 0

.parent{display:grid;
}
.child{align-self:center;/*margin: auto 0;*/
}

缺点

IE10- 浏览器不支持

小结

以上是 CSS 垂直居中的 8 种方法及其优缺点。

搞懂 CSS 水平居中与垂直居中的16个方法相关推荐

CSS水平居中与垂直居中
CSS水平居中与垂直居中总结本文讨论各种情况的居中实现. 如需要多层结构来实现居中,html文档均统一如下: <div class = 'parent'><div class = ...
聚齐这三张宝图，搞懂css权重
CSS权重的知识点算是一个难点,需要掌握所有的选择器,起码看到选择器能分辨出是哪种选择器.我集齐了 3 张图,看看这 3 张图能不能帮你搞懂 CSS 权重(优先级)问题.
CSS图片水平垂直居中的三种方法
CSS图片水平垂直居中的三种方法设置行高使用定位和translate 使用弹性盒子设置行高我们知道img元素为行内快元素,所以首先设置图片元素的父元素里文字水平居中,行高与整体高度一致. 其次 ...
CSS水平居中，垂直居中，水平垂直居中
本文主要介绍水平居中,垂直居中,还有水平垂直居中各种办法,思维导图如下: 水平居中 1.行内元素水平居中利用 text-align: center 可以实现在块级元素内部的行内元素水平居中.此方法对 ...
「CSS 3D 专题」搞懂 CSS 3D，你必须理解 perspective（视域）这个属性
关注前端达人,与你共同进步开篇上一章节<学习前,你需要了解什么是CSS 3D?>里,我们一起了解什么是CSS 3D,本篇章节笔者将带着大家学习 perspective(视域)这个重要属 ...
html怎么水平居中垂直居中,css水平居中和垂直居中的几种解决方案
有时候,为了前端设计的美观,需要把div+css设计的页面里的某些div层里的文字垂直居中,包括多行文字以及单行文字:方法有不少,设计蜂巢就为大家介绍几种CSS水平和垂直居中的方法. 一.水平居中1. ...
css水平居中和垂直居中
文章目录前言一.水平居中 1.行内元素水平居中 2.块级元素水平居中定宽块级元素水平居中不定宽块级元素水平居中二.垂直居中 1.单行文本垂直居中 2.多行文本垂直居中 3.块级元素垂直居中 ...
css 水平居中和垂直居中
转自子非鱼87(http://www.cnblogs.com/fu277/archive/2012/09/13/2400118.html) 1.水平居中 (1) 文本.图片等行内元素的水平居中给父元 ...
CSS 水平居中、垂直居中、水平垂直居中
参考水平垂直居中 1.grid布局实现 <style>html,body{margin: 0;padding: 0;width: 100%;height: 100%;display: g ...

搞懂 CSS 水平居中与垂直居中的16个方法