CSS居中的各种实现方式
CSS中如何完美做到居中,一直是令前端工程师头疼的问题。最近读到CSS-TRICKS中的一篇帖子,将居中问题的解决方案策略化。感觉收获很大,翻译过来供大家交流学习。
当我们书写CSS时,让元素居中,是抱怨的爆发点之一:为什么会这么难?
我认为问题的关键,不在于怎么做,而在于我们如何从诸多居中方法中选择出适应当前情景的。
所以接下来,让我们一起创建一颗决策树,希望可以让居中变得简单。
水平居中
行内元素
我们可以通过对其父级块元素做如下处理来使行内元素居中。适用于inline
,inline-block
,inline-table
,inline-flex
等。
.center-children{text-align: center;
}
示例:传送门
块级元素
我们可以通过将一个块级元素的margin-left
和margin-right
同时设置为auto
来使其居中。(注意:此时元素必须定义有width
,否则将填满宽度,谈不上水平居中。)通常由以下简写来定义:
.center-me {margin: 0 auto;
}
示例: 传送门
多个块级元素
当同一行中有两个或以上块级元素需要居中时,我们不得不通过改变display
的类型来实现。下面的例子分别将display
设置为inline-block
以及flexbox
的例子。
示例: 传送门
当你指的是多个位于同一列上的块级元素时,将margin
设为auto
的技术依旧生效。
示例: 传送门
垂直居中
在CSS中做到垂直居中,我们需要稍微狡猾一点。
行内元素
单行
有时行内元素或文本能够做到垂直居中,仅仅是因为元素上、下的padding
相等。
.link {padding-top: 30px;padding-bottom: 30px;
}
示例: 传送门
在某些情况当padding
不适用,并且文字不会换行时,有一个技巧:当line-height
与height
相等时,文字垂直居中。
.center-text-trick {height: 100px;line-height: 100px;white-space: nowrap;
}
示例: 传送门
多行
上下padding
相等依旧可以解决这个问题。但当此方法不生效时,可能是元素或文本处于table cell
中,要么是html
语义中的table
,要么是CSS
中的设置。这种情况下,我们使用vertical-align
来完成垂直居中。注意:此为特殊用法,vertical-align
平时用来处理一行中的元素如何排列。
示例: 传送门
如果类似table
的那些无效时,也许我们应该尝试下flexbox
。 在flex
中,一个子元素可以轻易地在父元素中居中。
flex-center-vertically {display: flex;justify-content: center;flex-direction: column;height: 400px;
}
示例: 传送门
记住,这种做法仅在腹肌元素高度固定时(px, %等)才有效。
如果上述两种做法都无效,那么我们可以采用“幽灵元素”技术。在这种做法中,一个伪元素占据父元素的全部高度,然后文本在其中垂直居中。
.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;
}
示例: 传送门
块级元素
高度已知时
由于诸多原因,很多情况我们无法得知元素的高度,比如:当宽度变化时,文字的重绘会改变高度;文字样式的变化可能改变高度;文字数量的变化可能改变高度;宽高比固定的元素,比如图片,在改变大小时也会改变高度,等等。
但当我们知道高度时,可以按照如下方法实现垂直居中:
.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; */
}
示例: 传送门
高度未知时
在这种情况下,我们仍然可以实现垂直居中:将元素下移父级元素的50%,再上移自身高度的50%。
.parent {position: relative;
}
.child {position: absolute;top: 50%;transform: translateY(-50%);
}
示例: 传送门
可以使用flexbox
时
不算什么大的惊喜,在flexbox
中,这可容易多了。
.parent {display: flex;flex-direction: column;justify-content: center;
}
示例: 传送门
同时水平和垂直居中
我们可以通过结合使用前面讲述的技巧来实现将元素完美居中。主要有以下三种情况:
元素宽高固定时
此时可以使用绝对定位将元素置于父元素(50%,50%)的位置,之后再通过将margin
设置为负值。这种方法拥有广泛的浏览器支持。
.parent {position: relative;
}.child {width: 300px;height: 100px;padding: 20px;position: absolute;top: 50%;left: 50%;margin: -70px 0 0 -170px;
}
示例: 传送门
元素宽高不固定时
当宽高不固定时,我们可以使用transform
属性来实现将元素在两个方向同时移动50%。该宽度基于当前元素的宽度。
.parent {position: relative;
}
.child {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}
示例: 传送门
可以使用flexbox
时
此时我们需要使用两个居中属性:
.parent {display: flex;justify-content: center;align-items: center;
}
示例: 传送门
补充额外一种兼容性很好的方法
.Absolute-Center {margin: auto;position: absolute;top: 0; left: 0; bottom: 0; right: 0;
}
结论
我们完全可以在CSS中实现居中。
译自:css-tricks.com/centering-c…
CSS居中的各种实现方式相关推荐
- css样式高居中,CSS居中的几种方式
本文主要总结几种常见的CSS居中方式,下面我准备分为三个方向来写,分别是水平居中,垂直居中,水平垂直居中. 水平居中 1.inline元素如何实现水平居中?(text-align:center) 2. ...
- 【前端】【样式】CSS居中的三种方式
@charset "utf-8"; /* CSS Document */ /** *开发者:萌狼蓝天 *当前版本:v0.1[Debug] *最后更新日期:20210918 **/ ...
- 15种CSS居中的方式
简言 CSS居中是前端工程师经常要面对的问题,也是基本技能之一.今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种.如有漏掉的,还会陆续的补充进来,算做是 ...
- 快来学习一下吧!Web前端开发CSS居中的五大方式
学习css大家是不是对元素居中的知识点很是模糊?是不是苦于找不到一个总结的通俗易懂的说明?是不是自己懒得去总结?今天小编在前端的学习与实践中总结出的元素的五大居中方式,黏贴了代码并对代码做了解释,希望 ...
- CSS实现div的嵌套居中显示的多种方式
1.通过flex方式实现:将父盒子的position属性设置为relative,并且display设置为flex,最后设置水平居中和垂直居中.这样设置后,子盒子不需要设置什么,就会实现居中.哪个盒子需 ...
- CSS元素上下左右居中的几种方式
CSS元素上下左右居中的几种方式 假设以以下父子元素实现上下左右居中为例: <div class='father'><div class='son'></div> ...
- 【基础】这15种CSS居中的方式,你都用过哪几种?
简言 CSS居中是前端工程师经常要面对的问题,也是基本技能之一.今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种.如有漏掉的,还会陆续的补充进来,算做是 ...
- CSS居中方式(一)
文章目录 CSS居中方式 一.水平居中 a. 内联元素水平居中 b. 块级元素水平居中 c. 多块级元素水平居中 使用inline-block 使用display:flex 二.垂直居中 a. 单行内 ...
- CSS 居中方法集锦
CSS 居中方法集锦 记录收集纯CSS层面实现的水平.垂直居中方法可用于块级.行内快.内联元素以及文字图片等. 水平或垂直居中 1.1 text-align 1.2 margin 1.3 line- ...
最新文章
- 半导体理论(第1部分)本征半导体
- 03.full_text interval查询
- numpy.matrixlib.defmatrix.matrix写入csv文件
- 计算机为什么检测不到u盘启动项,BIOS设置U盘为第一启动项后检测不到如何解决?...
- 【codevs1316NOIP2012PJ】文化之旅,无题
- PHP常用函数(收集)
- 最实诚导师招生简章“火”了:目前只有不太充足的经费,但绝不克扣研究生补贴!...
- 使用Setup Factory安装包制作工具制作安装包
- 外卖行业现状分析_2020年中国外卖行业市场现状与发展前景分析
- 梦想还是要有的,万一实现了呢?
- 頑健なJavaプログラムの書き方
- 腾讯TBS浏览服务打开word.pdf.ppt等文档的使用
- Redis教程–事务机制基本介绍
- NIB 和 XIB 的区别 转载
- jsp中去掉超链接下划线吗,在JSP中,若要在JSP正确使用标签:
,在jsp中声称的taglib指令为:
下划线处应该是() 答案:x...
- 跟我一起写makefile
- 新光大ArtPark9亮相 以“艺术”再造生活方式
- 写给天天说“程序员完了”的人,android开发入门到精通
- 高分2号遥感影像数据融合
- 安卓开发 phoenix下拉刷新+taurus下拉刷新
热门文章
- 工作简历项目经历阐述
- 分类任务适合什么adam_他们就是穿什么:ADAM中的服装模拟
- Remote Sensing Images Semantic Segmentation with General Remote Sensing Vision Model via a Self-Supe
- 听力口语学习方法漫谈
- 计算机丢失deferrd.dll怎么解决,RdpSaPs.dll
- 【调剂】985华东师范大学数据科学与工程学院校企联合非全日制专硕调剂
- jupyter指定端口打开;ImportError: DLL load failed报错;jupyter登录token获取
- 手把手教你写 Socket 长连接
- 后缀是lnk是什么文件_ink文件是什么文件?与lnk文件只差一个字母,却有天壤之别!...
- 注意丨3月AQF考试准考证打印通道已开放