垂直水平居中的方式总结 +（使用场景）

YuboonaZhang 发布于2019-08-01 18:01 / 2599人阅读

摘要：内容无法撑开父级容器表格容器居中使用场景容器内容居中，并不想脱离文档流。缺点不适用于弹层这种盖住页面内容的布局使用和垂直居中值等于元素高度的值使用场景一个容器内部的当韩文字居中优点内容宽高，容器宽高均不用。

以前前端面试基础问题的时候经常会被问到这个问题：
但是从来没有做过这样的总结，网上很多人总结的很多，很好。自己干了这么多年，这个问题使用场景还是蛮多的，还是自己总结一下吧（不断更新）

1。绝对定位居中

        width: 100px;  
        height: 100px;  
        padding: 20px;  
        position: absolute;  
        top: 50%; left: 50%;  
        margin-left: -60px; /* (width + padding)/2 */  
        margin-top: -60px; /* (height + padding)/2 */

使用场景：Modal弹层, Toast, 布局内容提示单行提示文字
优点：1.适用场景多。2.不用care了父级元素的大小。3.兼容ie6-7
缺点：1.子元素的宽高需固定。2.内容无法撑开父级容器

2.transform绝对定位

  width: 50%;  
  margin: auto;  
  position: absolute;  
  top: 50%; left: 50%;  
  -webkit-transform: translate(-50%,-50%);  
      -ms-transform: translate(-50%,-50%);  
          transform: translate(-50%,-50%);

使用场景：不用兼容IE9以下的Modal弹层,弹层的宽高均不固定
优点：1.适用场景多。2.内容宽高，容器宽高均不用care
缺点：1.不兼容IE9以下。2.内容无法撑开父级容器

3.margin+绝对定位

    margin: auto;  
    position: absolute;  
    top: 0; left: 0; bottom: 0; right: 0;

使用场景：Modal弹层, Toast, 布局内容提示单行提示文字
优点：1.适用场景多。2.内容宽高，容器宽高均不用care。3.兼容性好
缺点：1.父级容器必须声明高度。2.内容无法撑开父级容器

4.表格容器居中

  display: table-cell;  
  vertical-align: middle;
  text-align: center;

使用场景：容器内容居中，并不想脱离文档流。（具体场景想不起来啦）
优点：1.内容溢出会将父元素撑开。2.内容宽高，容器宽高均不用care。3兼容IE9以下。
缺点：1.不适用于Modal弹层这种盖住页面内容的布局

5.使用line-height和text-align垂直居中

    text-align: center;
    height: 100px; 
    line-height: 100px;/*值等于元素高度的值*/

使用场景：一个容器内部的当韩文字居中
优点：1.内容宽高，容器宽高均不用care。 2. 兼容性好
缺点：1.内容必须是inline或者inline-block的单行文本，不支持多行文本。

6.Flex布局

   display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older             WebKit browsers.  */
   display: -moz-box;      /* OLD: Firefox (buggy) */
   display: -ms-flexbox;   /* MID: IE 10 */
   display: -webkit-flex;  /* NEW, Chrome 21–28, Safari 6.1+ */
   display: flex;          /* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */

   -webkit-box-align: center; -moz-box-align: center; /* OLD… */
   -ms-flex-align: center; /* You know the drill now… */
   -webkit-align-items: center;
   align-items: center;

   -webkit-box-pack: center; -moz-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;

使用场景：微信小程序和一些不需要兼容IE的移动端H5开发
优点：1.内容宽高，容器宽高均不用care。
缺点：1.不兼容IE10以下的浏览器

云服务器超融合服务器 redis的使用场景消息队列的使用场景负载均衡的场景云计算的应用场景

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

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

水平、垂直居中方式总结

摘要：我们在实际工作中经常会遇到需要水平居中或者垂直居中的场景，今天我们就来看一下如何设置水平居中和垂直居中。水平居中行内元素。不定宽块状元素水平居中我们来学习一下这种方法。我们在实际工作中经常会遇到需要水平居中或者垂直居中的场景，今天我们就来看一下如何设置水平居中和垂直居中。水平居中行内元素。如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:c...

陆斌 2019-08-30 12:49 评论0 收藏0
垂直水平居中的方式总结 +（使用场景）

摘要：内容无法撑开父级容器表格容器居中使用场景容器内容居中，并不想脱离文档流。缺点不适用于弹层这种盖住页面内容的布局使用和垂直居中值等于元素高度的值使用场景一个容器内部的当韩文字居中优点内容宽高，容器宽高均不用。以前前端面试基础问题的时候经常会被问到这个问题：但是从来没有做过这样的总结，网上很多人总结的很多，很好。自己干了这么多年，这个问题使用场景还是蛮多的，还是自己总结一下吧（不断更新）...

Kaede 2019-08-05 12:24 评论0 收藏0
垂直水平居中的方式总结 +（使用场景）

摘要：内容无法撑开父级容器表格容器居中使用场景容器内容居中，并不想脱离文档流。缺点不适用于弹层这种盖住页面内容的布局使用和垂直居中值等于元素高度的值使用场景一个容器内部的当韩文字居中优点内容宽高，容器宽高均不用。以前前端面试基础问题的时候经常会被问到这个问题：但是从来没有做过这样的总结，网上很多人总结的很多，很好。自己干了这么多年，这个问题使用场景还是蛮多的，还是自己总结一下吧（不断更新）...

snifes 2019-08-29 13:49 评论0 收藏0
css对齐方案总结

摘要：核心代码利用布局利用布局，其中用于设置或检索弹性盒子元素在主轴横轴方向上的对齐方式而属性定义子项在容器的当前行的侧轴纵轴方向上的对齐方式。核心代码相对于的水平垂直居中列表布局兼容性好核心代码布局核心代码css对齐方案总结垂直居中通用布局方式(内敛元素和块状元素都适用) 利用flex:核心代码: 12345 .container{ display:flex; ...

marek 2019-04-23 11:45 评论0 收藏0
前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

Hydrogen 2019-08-05 12:48 评论0 收藏0