对CSS居中的一点总结
在学习前端的过程中,发现元素和文本的水平居中和垂直居中,是经常会出现的问题,在实际工作中也会经常碰到。居中的技巧有很多,但在编写代码的过程中,发现有时候技巧管用,有时候不管用,于是就将每个知道的方案都试一遍,找到合适的。这种情况究其原因是对居中的认识不够深入,只是停留在实现需求的水平上。为了更好的加深对居中的理解,搜集和阅读相关资料,发现不错的文章将其整理出来。原文参考:https://css-tricks.com/centering-css-complete-guide/
居中是什么
居中故名思意就是将物体放置在其容器的中间,在css中居中就是指元素、文本、图片等相对其容器或父元素或浏览器窗口能够居中显示。而根据显示方式的不同,又分为水平居中,垂直居中,水平垂直居中。下面就分情况对居中进行讨论。
水平居中
水平居中我们常见的一种解决方案就是设置text-align:center,然而我们会发现这种方式有时候有效,有时候却没有效果。这是因为我们在使用相关方法的时候并没有对块级元素和行内元素进行区分,不同类型的元素其居中方法是不同的:
当元素为行内元素时(如文本,链接)
当需要居中的元素为行内元素时,你可以通过在其父元素(必须是块级元素)设置如下css样式:
.parent {
text-align:center;
}
这种方法对display设置为inline、inline-block、inline-table、inline-flex的元素都有效。
块级元素居中
对于一个块级元素你可以通过设置其margin属性,来达到水平居中的效果。你可以将其margin-left和margin-right设置为auto:
.center{
margin:0 auto;
}
这样浏览器就会根据元素的宽度自动为元素左右两边设定等宽的margin,来达到水平居中的效果。这里需要注意的是元素需要设定width属性,否则元素的宽度会自动充满父元素,就不存在相对父元素水平居中一说了。
示例代码点击预览
这里需要注意的是这种方法对设置float属性的块级元素是没有效果的,浮动元素的居中这里有一个解决方案,但是该方法的布局比较混乱,子元素脱出父元素,并不推荐。
另外有一个tricks,能够实现如下图中
文字环绕图片居中的效果,具体参见这篇文章。
当有多个块级元素时
当你需要对多个块级元素进行居中显示时,如果块级元素如下垂直排列:
,那么简单的设置margin:0 auto;就可以轻松实现。
但如果如下排列:
那么就可以使用display:inline-block将多个块元素单行显示,同时由于inline的缘故,可以在父元素设置text-align:center将多个块元素居中,当然也可以将元素设置为display:flex; justify-content: center;达到居中效果。详细代码示例点击预览
垂直居中
垂直居中相比于水平居中,就复杂一些,还是分块级与行内进行讨论。
inline或inline-block元素
单行垂直居中的情况
当父元素没有设定宽度,而是根据内容自适应时,简单的设置padding就可以达到垂直居中的效果,如:
css:
.p{ border: 1px solid yellow;padding: 80px;}
.p a{
background-color: black;
color: white;
border: 2px solid red;
padding: 30px; /*相同的上下内距实现垂直居中*/
}
html:<div class="p">
<a href="#">asldkjflkadfk</a></div>
在某些情况下设置padding并不能满足需求,而你又需要将一段单行显示的文本居中,这时你可以将line-height和height属性设置为等高来达到目的:
html:<main><div>I'm a centered line.</div></main>css:
main {
background: white;
margin: 20px 0;
padding: 40px;
}
main div {
background: black;
color: white;
height: 100px; /*行高与line-height相同*/
line-height: 100px;
padding: 20px;
width: 50%;
white-space: nowrap;
}
关于line-height,有许多需要了解和注意的地方,想详细了解为什么这么这种方法可以实现垂直居中,可以参见这篇文章
多行垂直居中
设置padding同样可以使多行文本居中,但有时当文本出现在表格单元格里或其他情况也会使该方法无效。这时会用到vertical-align属性,
更多关于vertical—align的信息,可以点击这里和这篇
需要指出的是只有一个元素属于inline或是inline-block(table-cell也可以理解为inline-block水平)水平,其身上的vertical-align属性才会起作用
如果table—like不行,也许你可以试一下flex-parent, 一个flex-child可以很轻易的在flex-parent里垂直居中:
.flex-center-vertically {
display: flex;
justify-content: center;
flex-direction: column;
height: 400px;
}
需要注意的是父容器必须有一个固定的高度。
如果上述2中方法都不可行,你就需要借助伪元素,也就是在父容器里添加一个高度占满整个父元素的伪元素,文本就居中显示在里面。
.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; */ /*这里可以使用transform:translate(-50%)实现同样的效果*/ }
上述代码是通过定位的方式,来实现垂直居中,子元素参照父元素进行绝对定位,相对于父元素的上边缘向下移动50%(父元素高度的50%),然后通过margin-top元素将子元素向上拉自身的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属性,设置translate(-50%),这里的50%是相对与元素本身的宽高。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
使用flexbox
想要水平垂直居中,你需要设置两个居中属性
链接:https://segmentfault.com/a/1190000006913661(点击尾部阅读原文前往,本文涉及到较多代码,请前往原文查看完整代码)
对CSS居中的一点总结的更多相关文章
- css居中小结
从css入门就开始接触,无所不在的,一直备受争议的居中问题. css居中分为水平居中和垂直居中,水平居中方式也较为常见和统一,垂直居中的方法就千奇百怪了. 博客原文地址:Claiyre的个人博客 ht ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- CSS居中demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...
- css居中那点事儿
css居中那点事儿 在css中对元素进行水平居中是非常简单的,然而使元素垂直居中就不是一件简单的事情了,多年以来,垂直居中已经成为了CSS领域的圣杯,因为它是极其常见的需求,但是在实践中却不是一件简单 ...
- css居中学习笔记
css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...
- CSS居中完全解决方案
上次面试面试官问到了,问了个定宽局中和不定宽局中,下来我把所有有关CSS居中都总结了一下 原文摘自我的前端博客,欢迎大家来访问 http://www.hacke2.cn 水平居中 行内元素 把行内元素 ...
- 理解CSS居中
我想很多在前端学习或者开发过程中,肯定会遇到如何让你的元素居中的问题,网上google肯定会有很多的解决方法.今天我就个人的项目与学习经验谈谈个人理解css如何让元素居中. 要理解css的居中,首先必 ...
- CSS 居中大全【转】
我看最近微博流行 CSS 居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:“茴香豆的回字有四种写法”,万一哪天有个面试官问你:“居中一共有几种写法 ...
- CSS居中的实现用法实例
转载的一篇文章,讲解css内容居中的. 网上有关css 居中的文章不胜枚举,不过大多没有做系统的总结.这里分享的这篇有关css居中的文章,个人感觉不错,值得收藏. 一.水平居中1,将元素水平居中(us ...
随机推荐
- python——周边
Pythonic的禅意 import this python是用c语言写的.传说python不止有C语言实现,还有java实现,还有python实现的python,甚至还有js实现的python. p ...
- js库之art.dialog
自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应,因此你不必去考虑消息内容尺寸使用它.它的消息容器甚至能够根据宽度让文本居中或居左对齐——这一切 ...
- sidePagination: "server"和responseHandler: responseHandler
bootstrapTable()中有两个属性 一个是sidePagination,表示服务器分页,responseHandler:responseHandler 表示回应操作的rows和total 两 ...
- 补码复习的好例子---Int范围的科学解释
Int范围的科学解释 这得从二进制的原码说起: 如果以最高位为符号位,二进制原码最大为0111111111111111=2的15次方减1=32767 最小为1111111111111111=-2的15 ...
- html<textarea>标签
最近在项目中页面回显<textarea>的值,可是设置了value属性怎么也回显不出来,后来才弄清楚,原来想要设置<textarea>的文本,不是使用value,而是如下方式: ...
- jsp弹出Please check the location and try again!对话框
关闭它的jsp图形模式.myeclipse10中打开jsp文件时,右键open with 选MyEclipse JSP Editor,不选MyEclipse Visual JSP Editor模式.
- Python 安全类目推荐 (持续更新)
推荐学习书目 › Learn Python the Hard Way › Python 学习手册 › Python Cookbook › Python 基础教程 Python Sites › PyPI ...
- 解决:Android编译源码根目录下/system/vold后,通过push命令将编译生成的vold文件push至system/bin下无法正常开机
这段时间由于工作需要,在对android根目录下/system/vold进行修改编译的时候,在通过adb命令将vold文件push至/system/bin目录下,adb reboot重启手机却发现一直 ...
- Android Bluetooth详解(Android英文文档相关译文)
一.Bluetooth Android平台包含了对Bluetooth协议栈的支持,允许机器通过Bluetooth设备进行无线数据交换.应用框架通过Android Bluetooth API访问Blue ...
- iOS app的破解原理,就是去除已付费的账户信息的原理是什么?
正规的应用程序(IPA 格式,官方软件店发布)在被 iTunes 同步到 iPhone 的时候会调用系统进程 INSTALLD 对应用程序进行证书校验(GPLv3 授权)而这个证书本身是由官方捆绑在应 ...