这是一个挺常见的前端面试题，但是没有做过总结。有的时候可能会使用完了，很长一段时间不去使用，会慢慢忘记。所以，温故而知新，还是很有必要的。

一、绝对定位元素的居中实现

这一种工作中用的应该是最多的，兼容性也是很好。

 <!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实现水平垂直居中的更多相关文章

  1. 前端面试题-CSS优先级

    一.选择器优先级 浏览器通过优先级来判断哪一些属性值与一个元素最为相关,从而在该元素上应用这些属性值.优先级是基于不同种类选择器组成的匹配规则. 二.优先级计算 优先级就是分配给指定的CSS声明的一个 ...

  2. 前端面试题-CSS选择器

    一.CSS选择器作用 CSS 选择器用于定位我们想要给予样式的 HTML 元素,但不只是在 CSS 中,JavaScript 对 CSS 的选择器也是支持的,比如 document.document. ...

  3. 前端面试题-CSS Hack

    一.CSS Hack的概念 由于不同厂商的流览器或某浏览器的不同版本(如IE,Firefox/Safari/Opera/Chrome等),对CSS的支持.解析不一样,导致在不同浏览器的环境中呈现出不一 ...

  4. 前端面试题 ----css篇

    转载自https://www.cnblogs.com/zhangshuda/p/8465043.html,感谢原博主 1.css盒模型有哪些及区别content-box border-box padd ...

  5. 前端面试题CSS一（题目来源网络）

    一.什么是html5语义化? 使用合理,正确的html标签格式化文档. 二.CSS样式优先级? 就近原则,行内>内联>外联 三 什么是盒模型? 主要分为两种,w3c标准盒模型,IE标准模型 ...

  6. 常见前端面试题CSS部分

    1.盒模型 IE 盒子模型:IE的width部分包含了 border 和 pading; 标准 W3C 盒子模型: width/height+border+padding+margin; 2.清除浮动 ...

  7. 前端面试题（HTML/CSS）

    (前端面试题大全,持续更新) 常用的块级元素和行内元素有哪些?说说他们的特点? 浮动产生的原因?清除浮动? 说说一下盒模型 float和position一起用是什么效果 rem用过吗?做不同手机的适配 ...

  8. 常见前端面试题之HTML/CSS部分

    转自http://www.cnblogs.com/jscode/archive/2012/07/10/2583856.html Doctype是什么?如何触发严格模式与混杂模式模式?区分它们有何意义? ...

  9. 金三银四求职季,前端面试题小梳理(HTML、CSS、JS)

    好久没写学习记录,最近太多事,又到一年求职季,都说金三银四求职季,自己也做一下最近学习的一些前端面试题梳理,还是个小白,写的不对请指正,不胜感激. HTML篇 html语义化 用语义化的代码标签书写, ...

随机推荐

  1. win7 编译postgresql9.6.8

    一.环境 windows7 postgresql9.6.8 vs2010 perl5.24.3 二.编译安装 1.安装perl,安装到C:\Perl64路径下,安装完成后设置环境变量PATH和Perl ...

  2. 【zabbix】zabbix 高可用架构的实现

    https://www.jianshu.com/p/249d47b089b4?utm_campaign=maleskine&utm_content=note&utm_medium=se ...

  3. dp基础大概 (8.6)

    一些前言: 据说动态规划会用排序,数据结构来进行乱搞优化操作 动态规划滴核心是个啥呢?状态表示和状态转移 设状态:哪些因素会影响到最终答案,就把哪些因素用数组的维度表示出来 要充分描述,也要简洁 举个 ...

  4. tjuthesis 图标题左对齐修改办法

    图标题格式默认是居中的. 将 format 文件里定义图表标题样式部分的 \centering 删去,可变为左对齐. 如下: %% 定制浮动图形和表格标题样式\makeatletter\long\de ...

  5. 前端框架React入门课程【视频】

    视频教程列表: http://v1.mukewang.com/1a8228ac-5f7f-48de-b1c5-7d1b8bce9c77/L.mp4 1-1 React入门课程介绍 http://v1. ...

  6. 69.x的平方根

    class Solution: def mySqrt(self, x: int) -> int: if x < 2: return x left, right = 1, x//2 whil ...

  7. oracle--约束（主键、非空、检查）

    问题1:学号重复了,数据还可以插入成功 使用主键约束:学号是唯一标识一条数据的,所以必须唯一且不能为空 ---(1).在确定为主键的字段后添加 primary key关键字 ---(2).在创建表的后 ...

  8. jsp对象 指令 动作

    转载来源:https://blog.csdn.net/u010897406/article/details/49618413 jsp九大内置对象:1>out 向客户端输出数据,字节流.如out. ...

  9. HihoCoder - 1093 小Hi和小Ho (SPFA)

    描述 万圣节的晚上,小Hi和小Ho在吃过晚饭之后,来到了一个巨大的鬼屋! 鬼屋中一共有N个地点,分别编号为1..N,这N个地点之间互相有一些道路连通,两个地点之间可能有多条道路连通,但是并不存在一条两 ...

  10. 问题 H: 小k的简单问题

    问题 H: 小k的简单问题 时间限制: 1 Sec  内存限制: 128 MB提交: 107  解决: 57[提交] [状态] [命题人:jsu_admin] 题目描述 地图上有n个村庄,小k每个月需 ...