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

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

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

 <!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. Android操作系统中11种传感器的介绍【转】

    本文转载自:http://www.oschina.net/question/163910_28354 在Android2.3 gingerbread系统中,google提供了11种传感器供应用层使用. ...

  2. 解决ubuntu18.04使用vi编辑器方向键错乱

    1.编辑 vimrc.tiny 文件 vi /etc/vim/vimrc.tiny 2.修改下述内容 修改 set compatible 为 set nocompatible 添加 set backs ...

  3. 读Dubbo源码，学习SPI

    核心类 ExtensionLoader 使用方法 定义接口,使用@SPI标记 @SPI("impl1") public interface SimpleExt { // @Adap ...

  4. Visual Studio关于项目迁移或拉取代码产生的dll黄色感叹号警告问题解决方案

    今天换了台大电脑,准备好好爽一下, 就把笔记本上的项目拷贝到了台式机上, 但是我没有拷贝解决方案整个文件夹,因为其中项目太多了,我就把其中一个项目的文件夹直接拷贝到电脑上,然后就出现了下面的情况. 这 ...

  5. Altium Designer chapter7总结

    PCB设计高级进阶中需要注意如下: (1)PCB层集合管理:对于后期的处理可以看到不同层的相关信息. (2)内电层的分割:对于多层板的设计,特别是电源层中有不同类型的电源时需要考虑电源的分割. (3) ...

  6. 【CTS】几个serialno失败项

    [问题结论] [Common]SN配置项的问题,只可以'数字与大小写字母' 将配置SN改为字母数字组合,测试全部pass [问题描述] CTS三条失败项 run cts -m CtsTelephony ...

  7. git的忽略文件语法规范

    忽略文件语法规范 空行或是以 # 开头的行即注释行将被忽略. 可以在前面添加正斜杠 / 忽略当前路径文件,但不包括子目录的同名文件. 可以在后面添加正斜杠 / 来忽略文件夹. 可以使用 ! 来否定忽略 ...

  8. xmake新增智能代码扫描编译模式

    最近给xmake增加了一个新特性,对于一份工程源码,可以不用编写makefile,也不用编写各种make相关的工程描述文件(例如:xmake.lua,makefile.am, cmakelist.tx ...

  9. spring data jpa 使用SQL语句查询

    package com.ytkj.entity; import javax.persistence.*; import java.io.Serializable; /** * @Entity * 作用 ...

  10. Symmetric Tree（对称二叉树）

    来源:https://leetcode.com/problems/symmetric-tree Given a binary tree, check whether it is a mirror of ...