在前端开发中,我们经常会遇到各种上不同场景的关于居中的布局,一般水平居中是相对简单,而 垂直居中与水平垂直则相应要麻烦些 。在下来我们对各种场景一一列出解决方案 。
水平居中
水平居中相对于其它几中居中排列要简单的多,按标签元素可分为行内元素与块级元素居中:
1、行内元素
如:a img span em b small 此类标签元素及文本
![CSS之居中布局的实现方法](http://img.readke.com/230524/15255424G-0.png)
文章插图
2、块级元素
如:div section header p此类标签元素,需要设置宽度
![CSS之居中布局的实现方法](http://img.readke.com/230524/15255450D-1.png)
文章插图
垂直居中
1、line-height
针对有且仅有一行内容时可行 。将line-height值设为相对应高度即可 。
2、vertical-align
针对行内元素如img span等元素,其对齐相对于文本基线 。达不到完美的垂直居中,不常用 。
3、其它
关于垂直居中其它方式参考水平垂直居中 。
水平垂直居中
在水平垂直居中的场景中,可分为定宽定高、不定宽不定高,按不同应用场景可分如下几种方式,在布局中实际情况而定 。
1、Flex方式
适用场景:IE9 、现代浏览器、响应式、不定宽不定高
![CSS之居中布局的实现方法](http://img.readke.com/230524/1525541101-2.png)
文章插图
2、绝对定位方式
适用场景:IE8 、及现代浏览器、响应式
![CSS之居中布局的实现方法](http://img.readke.com/230524/1525541H0-3.png)
文章插图
3、绝对定位 transform方式
适用场景:IE9 、及现代浏览器、响应式、不定宽不定高
【CSS之居中布局的实现方法】
![CSS之居中布局的实现方法](http://img.readke.com/230524/1525541350-4.png)
文章插图
4、绝对定位 calc函数
适用场景:IE9 、及现代浏览器、定宽定高
![CSS之居中布局的实现方法](http://img.readke.com/230524/1525543T5-5.png)
文章插图
5、绝对定位 margin负属性
适用场景:IE6 、及现代浏览器、定宽定高
![CSS之居中布局的实现方法](http://img.readke.com/230524/15255451R-6.png)
文章插图
6、Table-cell方式
适用场景:IE8 、及现代浏览器、不定宽不定高
![CSS之居中布局的实现方法](http://img.readke.com/230524/1525543A2-7.png)
文章插图
推荐阅读
- 从99R到45R繁体中文版
- 皮草围巾如何清洗和除味
- 鸽子怎么折
- 窗花电视剧剧情介绍
- 和平精英金币怎么花 金币用处推荐
- 马有趣的地方是什么
- 电脑360wifi如何开启解决方法
- 干面条可以放冰箱吗 打开的干面条能不能放冰箱储存
- 思援弓缴而射之的弓是什么意思