前端面试题：CSS实现水平垂直居中
这是一个挺常见的前端面试题，但是没有做过总结。有的时候可能会使用完了，很长一段时间不去使用，会慢慢忘记。所以，温故而知新，还是很有必要的。
一、绝对定位元素的居中实现
这一种工作中用的应该是最多的，兼容性也是很好。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>绝对定位元素的居中实现margin</title>
<style>
.center-vertical{
width: 100px;
height: 100px;
background: orange;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px; /*高度的一半*/
margin-left: -50px; /宽度的一半*/
}
</style>
</head>
<body>
<div class="center-vertical"></div>
</body>
</html>
效果：
缺点：需要提前知道元素的尺寸。如果不知道元素尺寸，这个时候就需要JS获取了。
CSS3.0的兴起，使这个问题有了更好的解决方法，就是使用 transform 代替 margin 。
transform 中 translate 偏移的百分比是相对于自身大小而说的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>未知宽高的元素水平垂直居中transform</title>
<style>
.content{
background: orange;
position: absolute;
top: 50%;
left: 50%;
transform: translate( -50%, -50%);
}
</style>
</head>
<body>
<div class="content">你复合1233肥反反复复</div>
</body>
</html>
效果：
优点：无论绝对定位元素的尺寸是多少，它都是水平垂直居中显示的。
缺点：就是兼容性问题。
二、margin: auto;实现绝对定位元素的居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>margin:auto实现绝对定位元素的居中</title>
<style>
.center-vertical{
width: 100px;
height: 100px;
background: orange;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="center-vertical"></div>
</body>
</html>
效果：
注意：
上下左右均为 0 位置绝对定位。
margin: auto;
三、CSS3.0弹性布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平垂直居中==弹性布局</title>
<style>
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body{
display: flex;
align-items: center;/*定义body的元素垂直居中*/
justify-content: center;/*定义body的元素水平居中*/
}
.content{
width: 300px;
height: 300px;
background: orange;
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
效果：
四、vertical-align:middle;垂直方向居中
verical-align 定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
允许指定负长度值和百分比值。这会是元素降低而不是升高。
在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vertical-align:middle;</title>
<style>
.big-box{
width: 500px;
height: 400px;
background: green;
text-align: center;
}
.box{
line-height: 400px;
}
img{
vertical-align: middle;
}
</style>
</head>
<body>
<div class="big-box">
<span class="box">
<img src="ermao.jpg"/>
</span>
</div>
</body>
</html>
效果：
五、display:table实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>display: table-cell;</title>
<style>
.parent{
width: 300px;
height: 300px;
background: orange;
text-align: center;
display: table;
}
.son{
display: table-cell;
background-color: yellow;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="parent">
<div class="son">nihaosssss</div>
</div>
</body>
</html>
效果：
六、相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>实现水平垂直居中==相对定位实现</title>
<style>
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.content{
width: 300px;
height: 300px;
background: orange;
margin: 0 auto;/*水平居中*/
position: relative;/*设置position*/
top: 50%; /*偏移*/
/*margin-top: -150px;*/ /*第一种：margin-top*/
transform: translateY(-50%);/*第二种：transform：转换*/
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
效果：
前端面试题：CSS实现水平垂直居中的更多相关文章
- 前端面试题-CSS优先级
一.选择器优先级 浏览器通过优先级来判断哪一些属性值与一个元素最为相关,从而在该元素上应用这些属性值.优先级是基于不同种类选择器组成的匹配规则. 二.优先级计算 优先级就是分配给指定的CSS声明的一个 ...
- 前端面试题-CSS选择器
一.CSS选择器作用 CSS 选择器用于定位我们想要给予样式的 HTML 元素,但不只是在 CSS 中,JavaScript 对 CSS 的选择器也是支持的,比如 document.document. ...
- 前端面试题-CSS Hack
一.CSS Hack的概念 由于不同厂商的流览器或某浏览器的不同版本(如IE,Firefox/Safari/Opera/Chrome等),对CSS的支持.解析不一样,导致在不同浏览器的环境中呈现出不一 ...
- 前端面试题 ----css篇
转载自https://www.cnblogs.com/zhangshuda/p/8465043.html,感谢原博主 1.css盒模型有哪些及区别content-box border-box padd ...
- 前端面试题CSS一（题目来源网络）
一.什么是html5语义化? 使用合理,正确的html标签格式化文档. 二.CSS样式优先级? 就近原则,行内>内联>外联 三 什么是盒模型? 主要分为两种,w3c标准盒模型,IE标准模型 ...
- 常见前端面试题CSS部分
1.盒模型 IE 盒子模型:IE的width部分包含了 border 和 pading; 标准 W3C 盒子模型: width/height+border+padding+margin; 2.清除浮动 ...
- 前端面试题（HTML/CSS）
(前端面试题大全,持续更新) 常用的块级元素和行内元素有哪些?说说他们的特点? 浮动产生的原因?清除浮动? 说说一下盒模型 float和position一起用是什么效果 rem用过吗?做不同手机的适配 ...
- 常见前端面试题之HTML/CSS部分
转自http://www.cnblogs.com/jscode/archive/2012/07/10/2583856.html Doctype是什么?如何触发严格模式与混杂模式模式?区分它们有何意义? ...
- 金三银四求职季,前端面试题小梳理(HTML、CSS、JS)
好久没写学习记录,最近太多事,又到一年求职季,都说金三银四求职季,自己也做一下最近学习的一些前端面试题梳理,还是个小白,写的不对请指正,不胜感激. HTML篇 html语义化 用语义化的代码标签书写, ...
随机推荐
- React-Native 之 GD （一）目录结构与第三方框架使用与主题框架搭建
1.APP效果图 2.工程环境配置 IOS: 将压缩包内的 Images.xcassets 文件夹直接替换掉我们iOS工程中的 Images.xcassets 文件夹. 这时候我们可以看到所有图片资源 ...
- bash如何向上向下移动历史命令记录
bash如何在 历史命令记录 中上下移动? 通过bash本身的设置,就可以做到! : 用shift+up , shift+down 来上下移动 : 单纯的up/down是调用历史命令
- day57——ajax之初体验
转行学开发,代码100天——2018-05-12 今天是一个特别的日子——首先是母亲节,在此也祝福亲爱的妈妈健康长寿.其次今天是汶川大地震10周年,10年过去了,经历过苦难的人更加坚毅勇敢地面向未来! ...
- Java 位运算超全面总结
1.原码.反码.补码 关于原码.反码.补码的相关知识作者不打算在这里长篇大论,相关知识已有别的大佬总结很好了,还请老铁自行 Google,不过有篇知乎回答是作者学编程以来见过对相关知识最通俗易懂,生动 ...
- npm构建vue项目
环境搭建 我们需要先从node.js官网安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装). 安装完成之后,打开命令行工具(Mac打开终端),输入 node -v,如图,如果出现相应的 ...
- python2.7+appium环境搭建
实现android自动化 目录 1.环境准备.安装包准备 2.安装 3.验证环境搭建成功 1.环境准备.安装包准备 第一步:环境准备: java环境 python环境 第二步:准备安装包 Node.j ...
- 【MM系列】SAP MM模块-组织结构第二篇
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP MM模块-组织结构第二篇 ...
- linux安装JSONCPP
#tar -zxf scons-2.1.0.tar.gz #cd scons-2.1.0 #python setup.py install #tar -zxf jsoncpp-src-0.5.0. ...
- MSF——客户端渗透之VBScript感染
弱点扫描 根据信息收集的结果搜索漏洞利用模块 结合外部漏洞扫描系统对大IP地址段进行批量扫描 误报率.漏报率 VNC密码破解 客户端渗透 VBScript感染方式 利用 宏 感染word.exce ...
- Leveldb源码分析--3
http://blog.csdn.net/sparkliang/article/details/8604416