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

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

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

 <!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. git使用,Git的skil-map，git配置http/https/socks5代理

    . 检出.克隆库: git clone git://git.openwrt.org/openwrt.git 2. git查看某个文件的修改历史 git log --pretty=oneline 文件名 ...

  2. oracle体系结构基础

    摘自:http://jianshi-dlw.iteye.com/blog/1554892 Oracle的体系结构大体上分为两部分:Instance(实例)和Database(数据库). Instanc ...

  3. [转]python常用的十进制、16进制、字符串、字节串之间的转换

    阅读目录(Content) 整数之间的进制转换: 字符串转整数: 字节串转整数: 整数转字节串: 字符串转字节串: 字节串转字符串: 测试用的python源码 进行协议解析时,总是会遇到各种各样的数据 ...

  4. SQLite入门语句之约束

    一.SQLite约束之NOT NULL 确保某列不能有 NULL 值.默认情况下,列可以保存 NULL 值.如果您不想某列有 NULL 值,那么需要在该列上定义此约束,指定在该列上不允许 NULL 值 ...

  5. jdbcTemplate和namedParameterJdbcTemplate

    jdbcTemplatejdbcTemplate配置<!-- 注入jdbcTemplate 官方工具包 --> <bean id="jdbc" class=&qu ...

  6. SpringBoot错误经验

    1.在application.properties 添加 debug=true,可以看见项目的执行流程有助于调bug 2.如果错误显示端口号被占用 cmd 步骤1 查看端口号应用情况:netstat ...

  7. Codeforces 609E (Kruskal求最小生成树+树上倍增求LCA)

    题面 传送门 题目大意: 给定一个无向连通带权图G,对于每条边(u,v,w)" role="presentation" style="position: rel ...

  8. 偏序问题及CDQ分治详解

    CDQ用来解决分治时左半部分对右半部分造成影响的问题. CDQ分治的经典问题是三维偏序问题. 要想解决三维偏序问题,首先你要知道什么是偏序.(废话) 一维偏序: 给出直线上的n个点,问有多少对点满足x ...

  9. linux下查看某个文件位置的方法

    linux下查看某个文件位置的方法: 例如,不知道apache的配置文件httpd.conf的位置,可以有两种方法来查看: 1.find / -name httpd.conf2.locate http ...

  10. JavaScriptDOM对象和jQuery对象的互相转换

    前言: 首先我们思考能不能直接在jQuery对象上调用原生DOM对象的方法或者直接在原生DOM对象调用jQuery对象呢?答案是否定的,我们看下把body背景色变为红色的代码: $("bod ...