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

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

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

 <!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. 使用wxpy模块了解微信好友

    网上看了一篇python文章,内容简单有趣,正好可以练习一下.原文连接:http://mp.weixin.qq.com/s/oI2pH8uvq4kwYqc4kLMjuA 一.环境:Windows+py ...

  2. 【cs231n作业笔记】二：SVM分类器

    可以参考:cs231n assignment1 SVM 完整代码 231n作业   多类 SVM 的损失函数及其梯度计算(最好)https://blog.csdn.net/NODIECANFLY/ar ...

  3. ceph-pve英语

    adapted accordingly并相应地调整 silosn. 筒仓:粮仓:贮仓(silo的复数) saturatevt. 浸透,使湿透:使饱和,使充满While one HDD might no ...

  4. 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_01 File类_2_File类的静态成员变量

    四个静态方法 打印的是一个分号 我们在配置java的环境变量的时候,路径就是以分号分隔开的 windows重视分好.linux是冒号 输出反斜线 选中这两个和上面的是一样的 只不过返回的是char类型 ...

  5. 【ABAP系列】SAP ABAP ALV合计或者小计 添加自定义文本

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP ABAP ALV合计或者小计 ...

  6. DevOps的前世今生

    From今日头条:https://www.toutiao.com/a6534660729453150723/?tt_from=weixin&utm_campaign=client_share& ...

  7. IQueryable在LINQ中

    IQueryable接口定义如下: // 摘要: // 提供对未指定数据类型的特定数据源的查询进行计算的功能. public interface IQueryable : IEnumerable { ...

  8. [Python3 填坑] 007 多才多艺的 len()

    目录 1. print( 坑的信息 ) 2. 开始填坑 (1) 总的来说 (2) 举例说明 (3) 后记 1. print( 坑的信息 ) 挖坑时间:2019/01/10 明细 坑的编码 内容 Py0 ...

  9. python之callable

    callback是python的内置函数 英文说明: callable(object) Return True If the object argument appears callable,Fals ...

  10. Elasticsearch安装及遇到的问题(CentOS 7.3 64位)

    Elasticsearch安装 使用root用户创建一个其他用户,(elasticsearch不能在root账户下安装) # 添加一个名字是es工作组 groupadd es # 添加用户es设置密码 ...