CSS实现水平垂直居中可以说是前端老生常谈的问题了，一般面试官问的时候面试者都会回答出来，但是继续追问还有没有其他方法的时候有可能就说不出来了。

本着学习知识的目的，特在此纪录CSS实现水平垂直居中的多种方法。

准备工作

我们先写一个简单的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">

        <link rel="stylesheet" href="./index.css">

        <title>水平垂直居中</title>

    </head>

    <body>

        <div class="container">

            <div class="inner">水平垂直居中</div>

        </div>

    </body>

</html>


/* CSS文件 */

.container{

    width: 400px;

    height: 400px;

    border: 1px solid black;

}

.inner{

    width: 100px;

    height: 100px;

    border: 1px solid red;

}

最终浏览器呈现的效果如下

水平居中

水平居中的方式有多种，总体来说可以使用flex、grid、text-align、margin等方法，我们要实现如下所示的效果

使用flex方法

.container{

    width: 400px;

    height: 400px;

    border: 1px solid black;

    /* 新增 */

    display: flex;

    justify-content: center;

}

只需在父DOM元素中新增以上CSS即可实现水平居中

使用margin方法

.inner{

    width: 100px;

    height: 100px;

    border: 1px solid red;

    /* 新增 */

    margin: 0 auto;

}

注：这个方法适用于知道子dom元素宽度已知的情况下

使用text-align方法

要注意：text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐，并不控制块元素自己的对齐，只控制他行内内容的对齐。

所以这个属性对于我的HTML文件是无效的，我们要把内部的div改为span即可生效，修改后的代码如下：

<body>

    <div class="container">

        <!-- 将div修改为span -->

        <span class="inner">水平垂直居中</span>

    </div>

</body>

CSS样式表修改为如下所示

.container{

    width: 400px;

    height: 400px;

    border: 1px solid black;

    /* 新增 */

    text-align: center;

}

使用grid方法

.container{

    width: 400px;

    height: 400px;

    border: 1px solid black;

    /* 新增 */

    display: grid;

    grid-template-rows: 1fr; /* 让inner的高度占满 */

    grid-template-columns: 1fr; /* 让inner的宽度占满 */

    justify-items: center; /* 让inner水平居中 */

}

关于grid的更多介绍详见张鑫旭的

CSS实现水平垂直居中的数种方法整合的更多相关文章

  1. CSS实现水平垂直居中的1010种方式

    转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...

  2. css如何实现垂直居中（5种方法）

    css如何实现垂直居中(5种方法) 一.总结 一句话总结:行内只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了. 块的话可以尝试 margin:auto: ...

  3. CSS水平垂直居中的几种方法2

    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...

  4. CSS水平垂直居中的几种方法

    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...

  5. CSS子元素在父元素中水平垂直居中的几种方法

    1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效. #div1{ width: 300px; height: 3 ...

  6. 【笔记】让DIV水平垂直居中的两种方法

    今天写的了百度前端学院春季班的任务:定位和居中问题  由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...

  7. CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  8. CSS教程:div垂直居中的N种方法[转]

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  9. 如何将一个div水平垂直居中？4种方法做推荐

    方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...

随机推荐

  1. java web spring异步方法

    在项目中,时常会有异步调用的需求 web.xml配置 <servlet> <description>spring mvc servlet</description> ...

  2. Windows Server2008 R2 服务器域名设置Https安全证书访问

    域名支持Https访问设置 1.首先登陆域名申办公司的域名管理账号添加TXT域名解析信息 以新网域名公司为例:http://dcp.xinnet.com,输入域名:www.xxx.com和密码登录即可 ...

  3. jQYERY

    1.事件流: (1)事件捕获 (2)处于目标阶段 (3)事件冒泡 2.事件对象 对每一个事件都会回调函数,会有一个默认的事件对象,就是this event.target 触发的目标对象 event.t ...

  4. 什么是微信小程序?简单介绍

    1.微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有色的使用体验. 2.手机端App的另外一种新的展现形式 3.无需下载过多占用手机内存的app,小程序直接打开 ...

  5. python 一些程序规范（跨目录调用文件）

    文档内容学习于 http://www.cnblogs.com/xiaozhiqi/ 参考: https://www.cnblogs.com/monologuesmw/p/9490093.html 软件 ...

  6. 201871010104-陈园园 《面向对象程序设计（java）》第十周学习总结

    201871010104-陈园园 <面向对象程序设计(java)>第十周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ ...

  7. 怎么解决禅道启动服务mysqlzt时的端口失败

    打开Windows任务管理器 查看服务是否有MySQL正在运行,停止服务 启动mysqlzt服务 重新启动禅道

  8. nginx 缓存配置

    nginx 缓存是可以将远程服务器上的内容缓存到本地,可以设置缓存大小,缓存时间,缓存目录等等 具体配置如下 proxy_cache_path /home/http/cache/ levels=: k ...

  9. tuned linux 性能调优工具

    tuned 是redhat 提供的一套系统调优工具,使用简单,同时也提供了比较全的分类. 参考资料 https://github.com/redhat-performance/tuned

  10. [LeetCode] 286. Walls and Gates 墙和门

    You are given a m x n 2D grid initialized with these three possible values. -1 - A wall or an obstac ...