前端面试题：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语义化 用语义化的代码标签书写, ...
随机推荐
- Django的media配置与富文本编辑器使用的实例
效果预览 文章列表 添加文章 编辑文章|文章详情|删除文章 项目的基本文件 项目的Model from django.db import models # 导入富文本编辑器相关的模块 from cke ...
- Linux添加目录到环境变量以及添加Sublime Text到环境变量
本文主要介绍了Linux添加目录到环境变量以及添加Sublime Text到环境变量,通过具体的解释说明,让我们从中学到Linux添加目录到环境变量以及添加Sublime Text到环境变量的精髓所在 ...
- p2619 [国家集训队2]Tree I [wqs二分学习]
分析 https://www.cnblogs.com/CreeperLKF/p/9045491.html 反正这个博客看起来很nb就对了 但是不知道他在说啥 实际上wqs二分就是原来的值dp[x]表示 ...
- 解决ubuntu18.04使用vi编辑器方向键错乱
1.编辑 vimrc.tiny 文件 vi /etc/vim/vimrc.tiny 2.修改下述内容 修改 set compatible 为 set nocompatible 添加 set backs ...
- dependencies 和 starter
以 spring-cloud-alibaba-dependencies-1.5.0.RELEASE 为例: <dependency> <groupId>com.alibaba. ...
- VMware 接入 Openstack — 使用 Openstack 创建 vCenter 虚拟机
目录 目录 软件环境 前言 Openstack 接口驱动 使用 KVM 在 Compute Node 上创建虚拟机的流程 使用 VCDirver 在 vCenter 上创建虚拟机的流程 配置 vCen ...
- Centos7上安装Nginx两种方法
源码编译安装 http://nginx.org/en/download.html 到官网下载,然后用XFTP上传到root目录 把文件解压出来 tar -zxvf nginx-1.16.0.tar.g ...
- 毕业之后de经历
毕业之后 2016年7月,我大学毕业了.7月3号到7月6号,我陆续用我的小行李箱,在半夜12点左右,把我的生活用品拉出宿舍,大汗淋漓之后,我就在晚上12点多,找个奶茶店买一杯芒果冰沙.白天要去厦门的一 ...
- SpringBoot 参数检查 Controller中检查参数是否合法
springboot 验证 默认使用的是hibernate validator ,不用额外增加引用包,springboot已经内置包含. 设置pom相关依赖 <?xml version=&quo ...
- Spring-Boot 整合Dubbo 解决@Reference 注解为null情况
首先检查一下你的spring boot版本是多少? 如果是2.X 不用看了,spring boot 2.x 必定会出现这个问题, 改为 1.5.9 或其他1.x版本,目前生产环境建议使用1.x版本. ...