实现垂直居中的五种方法

qylost 发布于2019-08-30 15:44 / 278人阅读

摘要：实现垂直居中的几种方法分场景介绍包裹行内元素效果图包裹行内块级元素效果图结构效果图注容器若设置了再设置的无效，即会自动填满的高宽若未设置，则自适应的实际宽高

实现垂直居中的几种方法（分场景介绍）

line-height （包裹行内元素）


    123456788


    12345555


.wrap {
   height: 100px;
   line-height: 100px;
}

效果图

vertical-align: middle （包裹行内块级元素）

  
      
      
  
  
  .wrap {
       height: 100px;
       border: 1px solid #000;
       margin-bottom: 10px;
   }
   .child {
       border: 1px solid red;
       height: 50px;
       width: 200px;
   }

   .wrap::after, .child {
       display: inline-block;
       vertical-align: middle;
   }
   .wrap::after {
       content: "";
       height: 100%;
   }

效果图

flex结构 align-items

   
       block
       inline-block
       inline
   
   .wrap {
       display: flex;
       align-items: center;
       height: 100px;
       border: 1px solid #000;
       margin-bottom: 10px;
   }
   .child {
       border: 1px solid red;
       height: 50px;
       width: 200px;
   }
   .inline-block {
       display: inline-block;
       height: 30px;
   }

效果图

position + transform


    block

.wrap {
    position: relative;
}
.child {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
}

table table-ceil

    table-ceil
    block

.wrap { display: table; } .child { display: table-cell; width: 500px; vertical-align: middle; }

注：容器height/width 若wrap 设置了height/width, 再设置child的height/width无效，即 child会自动填满wrap的高宽；若wrap 未设置height/width，则wrap自适应child的实际宽高

云服务器私有云实现垂直居中下的五种负载均衡的五种策略垂直居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116116.html

CSS进阶篇--div中的内容垂直居中的五种方法

摘要：二内边距法另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用将内容垂直居中，比如这段代码的效果和法差不多。一、行高（line-height）法如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hi...

fjcgreat 2019-08-28 18:17 评论0 收藏0
CSS布局十八般武艺都在这里了

摘要：清单一些说明注意文档的书写顺序，先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列圣杯布局和双飞翼布局都会用到。可以通过设置的属性或使用双飞翼布局避免问题。双飞翼布局不用设置相对布局，以及对应的和值。本文首发于知乎专栏：前端指南 CSS布局布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的...

includecmath 2019-08-29 12:17 评论0 收藏0
CSS之div嵌套问题及高度自适应问题的五种实现--个人总结

摘要：以下是在自己实习生面试的时候遇到的一个问题，事后自己也去总结了一下。以下是在自己实习生面试的时候遇到的一个问题，事后自己也去总结了一下。问题描述如下：一个外层div里面嵌套两个内部div，外层div高度固定（假设未知），内层上面的div高度固定，如何让下面的div实现撑满外层的div高度？看到过网上有类似的问题，但是大部分都是假设外层高度为100%或者是已知的，而我遇到的是外层高度虽...

Jaden 2019-08-30 15:53 评论0 收藏0
html的几种水平垂直居中的方式（基础）

摘要：前言我们在编写马过程中，想必大家对水平垂直居中的方法了解并不多。所以我给大家总结式的列出几种常用的水平垂直居中的方法。前言我们在编写马过程中，想必大家对水平垂直居中的方法了解并不多。所以我给大家总结式的列出几种常用的水平垂直居中的方法。第一种方法 d第一种 .Centered1{ background-color: #800...

Songlcy 2019-08-30 15:44 评论0 收藏0