CSS居中的各种实现方式
来源:互联网 发布:mac系统字体库 编辑:程序博客网 时间:2024/05/24 05:02
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…
链接:https://juejin.im/post/5a09057ff265da43284058ea
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
- CSS居中的各种实现方式
- CSS居中的各种实现方式
- 各种居中的css实现
- CSS各种居中方式
- CSS实现居中的方式
- css的各种居中
- 各种居中的方式
- css垂直居中对齐的实现方式
- css实现水平居中和垂直居中的常见方式
- CSS的各种居中方法
- css多种方式实现元素的居中效果
- CSS垂直居中的11种实现方式
- 用CSS实现居中的几种方式
- CSS垂直居中的11种实现方式
- CSS垂直居中的11种实现方式
- CSS垂直居中的11种实现方式
- 纯CSS实现垂直水平居中的5种方式
- CSS垂直居中的11种实现方式
- 【cs229】斯坦福机器学习笔记(一)
- java解析音频文件/音乐播放器
- CRC校验和LCRC校验
- Android自动化测试
- spingAop——小白入门运用例子
- CSS居中的各种实现方式
- fastjson解析json数组/js文件
- [LeetCode]313. Super Ugly Number
- win7x64下的redis安装与使用
- 红黑树大白话详解
- redis数据库配置
- GeneratorConfig的配置
- 阅读日记
- 数据结构--线性表之StaticList类