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

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

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

 <!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. [转]python常用的十进制、16进制、字符串、字节串之间的转换

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

  2. Vue知识整理1：$watch方法的使用

    如下图所示:vue中,可以使用$watch方法显示变量的前面值和当前值,方便进行判断.使用方法: vm.$watch('a',function(newval,oldval){ ...... })

  3. MongoDB--(NoSQL)入门介绍

    NoSQL中比较优秀的产品 windows 下载安装 shell 基本操作(javascript 引擎) BSON扩充的数据类型(JSON的扩展,浮点型,日期型的扩充) step1.创建数据库 use ...

  4. Delphi中堆栈区别

     http://blog.csdn.net/zang141588761/article/details/52838728 Delphi中堆栈区别 2016-10-17 14:49 277人阅读 评论( ...

  5. 《计算机程式设计》Week4 课堂笔记

    本笔记记录自 Coursera课程 <计算机程式设计> 台湾大学 刘邦锋老师 Week4 Functions 4-1 System Function 函数主要分为两大类系统定义函数与使用者 ...

  6. struts2 token 防止表单重复提交

    1.jsp页面  输入框,提交按钮 <%@ page language="java" contentType="text/html" pageEncodi ...

  7. 一个 Java 字符串到底有多少个字符?

    来源:http://dwz.win/jqd 依照Java的文档, Java中的字符内部是以UTF-16编码方式表示的,最小值是 \u0000 (0),最大值是\uffff(65535), 也就是一个字 ...

  8. Codeforces 475D 题解(二分查找+ST表)

    题面: 传送门:http://codeforces.com/problemset/problem/475/D Given a sequence of integers a1, -, an and q ...

  9. BZOJ 1908. Pku2054 UVA1205 Color a Tree

    传送门 看一眼感觉 $dp$,发现状态没法维护 考虑贪心,然后就想了两个错的贪心... 正解好神啊 首先如果权值最大的点能够一步染色那么肯定要染它 意思就是,一旦父节点被染色那么它就要接着被染色 那么 ...

  10. .net AutoMapper（对象与对象之间的映射器） 的简单使用

    1.注册 /// <summary>    /// AutoMapper 注册    /// </summary>    public class AutoMapperConf ...