CSS 垂直居中的七种方法——史上最详细总结_css垂直居中_挪威森霖的博客

一、设定行高（line-height）

设定行高是垂直居中最简单的方式，适用于“单行”的“行内元素”（inline、inline-block），例如单行的标题，或是已经设为 inline-block 属性的 div，若将 line-height 设成和 height 一样的数值，则内容的行内元素就会被垂直居中，因为是行高，所以会在行内元素的上下都加上行高的1/2，所以就垂直居中了。不过由此就可以看出，为什么必须要单行的行内元素，因为如果多行，第二行与第一行的间距会变大，就不是我们所期望的效果了。
代码示例：

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直居中1</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            border: 1px solid #000;
            line-height: 200px;
            text-align: center;
        .vertical {
            display: inline-block;
            width: 30px;
            height: 30px;
            background: crimson;
    </style>
</head>
    <h2>设定行高line-height实现垂直居中</h2>
    <div class="box">
        <div class="vertical"></div>
    </div>
</body>
</html>
二、添加伪元素（::before、::after）
 
刚刚第一种方法，虽然是最简单的方法（适用于单行标题），不过就是只能单行，所以我们如果要让多行的元素也可以垂直居中，就必须要使用伪元素的方式。CSS 里头 vertical-align 这个属性虽然是垂直居中，不过却是指在元素内的所有元素垂直位置互相居中，并不是相对于外框的高度垂直居中。利用 ::before 和 ::after，让这个“伪” div 的高度为100%，就可以轻松地让其他的 div 都居中。不过 div 记得要把 display 设为 inline-block，毕竟 vertical-align:middle; 是针对行内元素，div 本身是 block。 
代码示例：
 
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直居中2</title>
    <style>
        .div0::before {
            content: "";
            width: 0;
            height: 100%;
            display: inline-block;
            position: relative;
            vertical-align: middle;
        .div0 {
            width: 300px;
            height: 200px;
            border: 1px solid #000;
            text-align: center;
        .redbox {
            width: 30px;
            height: 30px;
            background: red;
            display: inline-block;
            vertical-align: middle;
        .greenbox {
            width: 30px;
            height: 60px;
            background: green;
            display: inline-block;
            vertical-align: middle;
        .bluebox {
            width: 30px;
            height: 40px;
            background: blue;
            display: inline-block;
            vertical-align: middle;
    </style>
</head>
    <h2>添加伪元素（::before、::after）</h2>
    <div class="div0">
        <div class="redbox"></div>
        <div class="greenbox"></div>
        <div class="bluebox"></div>
    </div>
</body>
</html>
三、calc动态计算
 
看到这边或许会有疑问，如果 div 必须要是 block，该怎么让它垂直居中呢？这时候就必须用到 CSS 特有的 calc 动态计算的能力，我们只要让要居中的 div 的 top 属性，与上方的距离是“50%的外框高度+ 50%的 div 高度”，就可以做到垂直居中，至于为什么不用 margin-top，因为 margin 相对的是水平高度，必须要用 top 才会正确。注意使用：position: relative; 
代码示例：
 
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直居中3</title>




    

    <style>
        .div0 {
            width: 300px;
            height: 200px;
            border: 1px solid #000;
        .redbox {
            width: 30px;
            height: 30px;
            background: red;
            position: relative;
            top: calc(50% - 15px);
            float: left;
            margin-left: calc(50% - 45px);
        .greenbox {
            width: 30px;
            height: 60px;
            background: green;
            position: relative;
            top: calc(50% - 30px);
            float: left;
        .bluebox {
            width: 30px;
            height: 40px;
            background: blue;
            position: relative;
            top: calc(50% - 20px);
            float: left;
    </style>
</head>
    <h2>calc动态计算</h2>
    <div class="div0">
        <div class="redbox"></div>
        <div class="greenbox"></div>
        <div class="bluebox"></div>
    </div>
</body>
</html>
四、使用表格或假表格
 
在表格这个 HTML 里面常用的 DOM 里头，要实现垂直居中是相当容易的，只需要加一行 vertical-align:middle 就可以，为什么呢？最主要的原因就在于 table 的 display 是 table ，而 td 的 display 是 table-cell ，所以我们除了直接使用表格之外，也可以将要垂直居中元素的父元素的 display 改为 table-cell ，就可以轻松达成，不过修改 display 有时候也会造成其他样式属性的连动影响，需要比较小心使用。 
代码示例：
 
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直居中4</title>
    <style>
        .like-table {
            display: table-cell;
        td, .like-table {
            width: 300px;
            height: 200px;
            border: 1px solid #000;
            vertical-align: middle;
        td div, .like-table div {
            width: 150px;
            height: 100px;
            margin: 0 auto;
            color: #ffffff;
            line-height: 100px;
            text-align: center;
            background: darkgreen;
        .like-table div {
            background: crimson;
    </style>
</head>
    <h2>使用表格或假表格</h2>
    <table>
                <div>表格垂直居中</div>
    </table>
    <div class="like-table">
        <div>假的表格垂直居中</div>
    </div>
</body>
</html>
五、使用transform
 
transform 是 CSS3 的新属性，主要掌管元素的变形、旋转和位移，利用 transform 里头的 translateY（改变垂直的位移，如果使用百分比为单位，则是以元素本身的长宽为基准），搭配元素本身的 top 属性，就可以做出垂直居中的效果，比较需要注意的地方是，子元素必须要加上 position: relative，不然就会没有效果。 
代码示例：
 
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直居中5</title>
    <style>
        .use-transform {
            width: 300px;
            height: 200px;
            border: 1px solid #000000;
        .use-transform div {
            position: relative;
            width: 100px;
            height: 50px;
            background: darkgreen;
            margin-left: calc(50% - 50px);
            top: 50%;
            transform: translateY(-50%);
    </style>
</head>
    <h2>使用transform</h2>
    <div class="use-transform">
        <div></div>
    </div>
</body>
</html>
六、绝对定位
 
绝对定位就是 CSS 里头的 position: absolute，利用绝对位置来指定，但垂直居中的做法又和我们正统的绝对位置不太相同，是要将上下左右的数值都设为0，再搭配一个 margin: auto，就可以办到垂直居中，不过要特别注意的是，设定绝对定位的子元素，其父元素的 position 必须要指定为 relative，而且绝对定位的元素是会互相覆盖的，所以如果内容元素较多，可能就会有些问题。 
代码示例：
 
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直居中6</title>
    <style>
        .use-absolute {
            position: relative;
            width: 300px;
            height: 200px;
            border: 1px solid #000000;
        .use-absolute div {
            position: absolute;
            width: 100px;
            height: 50px;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            background: chocolate;
    </style>
</head>
    <h2>绝对定位</h2>
    <div class="use-absolute">
        <div></div>
    </div>
</body>
</html>
七、使用Flexbox
 
使用 align-items 或 align-content 的属性，轻轻松松就可以做到垂直居中的效果。 
代码示例：
 
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直居中7</title>
    <style>
        .use-flexbox {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 300px;
            height: 200px;
            border: 1px solid #000000;
        .use-flexbox div {
            width: 100px;
            height: 50px;
            background: coral;
    </style>
</head>
    <h2>使用Flexboxs</h2>
    <div class="use-flexbox">
        <div></div>
    </div>
</body>
</html>

 以上就是一些垂直居中的方法，由于垂直居中往往会动用到修改 display 这个属性，往往也会在排版上造成一些影响，例如不该用 flexbox 的地方如果用了 flexbox，不该用 table 的地方用了 table，不该用 inline-block 的地方用了 inline-block，后续反而要多写许多其他的定位样式来修正，那就有点本末倒置了，因此如何活用这些 CSS 垂直居中的方法，就要看版面结构而灵活运用。 
博主水平有限，若发现文中存在问题，欢迎留言指正！ 
 学习之路永无止境！
                    我们在写页面时，通常会用到水平居中或垂直居中，而水平居中很好处理，不外乎就是设定 margin: 0 auto; 或是 text-align: center; “垂直居中”却比较麻烦，下面介绍七种纯 CSS 实现垂直居中的方式。一、设定行高（line-height）设定行高是垂直居中最简单的方式，适用于“单行”的“行内元素”（inline、inline-block），例如单行的标题，或是已经设为 inline-block 属性的 div，若将 line-height 设成和高度一样的数值，则内容的行内元
				最近在学关系型数据库相关，MySQL 和 Postgre,捎带着学了 PHP，为了练手这几天就忙着自己搭博客，项目部署在某云上，该云算是良心，给的空间自己搭博客用足够了。本来想着每日一bo的,所以有的时候实在来不及就只能隔天更新了。以后尽量发点东西出来，等博客搭完写一写 SQL 数据库基础相关的分享，给跟我一样的小白道友们做下参考，大神请直接无视~
说到居中，很多人第一反应应该是水平居中，说到水平居中，肯定道友们有一万种方法做到，CSS3 的FlexBox更是强大到没朋友。但是良辰今天想聊的是 CSS 垂直居中的方法，下面是萌萌的分割线。神马？你敢说不萌？
•方式一 ：table 布局方法 
				css布局 实现垂直居中的几种方式一、单行元素垂直居中二、对文本进行垂直居中三、对已知高度块级元素进行垂直居中四、对未知高度块级元素进行垂直居中
<div class="parent">
  <div class="content">内容垂直居中</div>
一、单行元素垂直居中
1、可设置该行内元素的父元素的height与line-heigth的值相等，让行内元素垂直居中
2、针对行内元素，可通过设置vertical-align: middl
今天来看看一个之前困扰我很久的问题，在CSS中，水平垂直居中，能有几种写法。
方法一：margin:auto
子绝父相，当元素绝对定位的时候，会根据最近父元素进行定位，利用这个特性，我们有了这种方法。
CSS代码：
    width: 600px;
    height: 600px;
    position: relative;
    border: 1px solid #000000;
    position: absolute;
    margin: auto
				CSS实现垂直居中的7种方法1、设定行高(line-height)2、设置伪元素::before3、absolute + transform4. 设置绝对定位5、设置display:flex6、absolute + calc7. display:table-cell实现CSS垂直居中。
1、设定行高(line-height)
HTML：
<div class="parent">
    <span class="child">你好</span>
前端开发中元素居中是最常见和最经常使用到的css技巧，不仅开发中经常会用到，面试官出题考核基础时有时候也会问道这类问题。本文主要介绍10种垂直居中的方法。希望对你我都有帮组。
1、line-height+height实现
如果子元素是行内文本元素的话，只要设置父元素的height和line-height高度一样就可以垂直居中。
<div class="parent">
自己知道的不多，所以去网上搜了几种办法，以后了解到了还会继续补充：
（1）table-cell
将div的显示方式设置为表格，利用表格的vertical-align:middle属性：
<div clss="wrapper">
    <div class="cell">
        <div>垂直居中</div>
<style>
   .wrapper {d