面试常见问题——垂直居中的几种方法

Prasanta 发布于2019-08-28 18:05 / 1715人阅读

摘要：前几天面试，被问到两次，没答好，找到这篇文章收藏学习一下，来自这里做手机的页面，经常会遇到需要垂直居中的情况，这里把常用的垂直居中的几种方法整理下。

（前几天面试，被问到两次，没答好，找到这篇文章收藏学习一下，来自这里）

做手机的页面，经常会遇到需要垂直居中的情况，这里把常用的垂直居中的几种方法整理下。

结构

我是垂直居中元素

方法1：dispaly:table-cell

.box1{
  text-align:center; 
  display:table-cell;
  vertical-align:middle;
}

方法2：display:flex

.box2{
  display:flex;
  justify-content:center;
  align-items:center; 
  text-align:center;
}

方法3：translate(-50%,-50%)

.box3{ position:relative;}
.box3 span{
  position:absolute; 
  left:50%; 
  top:50%; 
  -webkit-transform:translate(-50%,-50%); 
  width:100%; 
  text-align:center;
}

方法4：display:inline-block

.box4{
  text-align:center; 
  font-size:0;
}
.box4 span{
  vertical-align:middle; 
  display:inline-block; 
  font-size:16px;
}
.box4:after{
  content:"";
  width:0;
  height:100%;
  display:inline-block;
  vertical-align:middle;
}

方法5：margin:auto

.box5{ 
  display:flex; 
  text-align:center;
}
.box5 span{
  margin:auto;
}

方法6：display:-webkit-box

.box6{
  display:-webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center; 
  text-align:center;
}

效果

整理这些实际是想尝试下不同的布局。

2，5，6实际都是flexbox的方法，flexbox兼容比较麻烦，布局可以参考ionic栅格。

3需要定位，4需要有参照物，最简单的还是table的方法。

写了一个table-布局的demo，实现方法比较简单，兼容性也比较好。

网上也已经有table的栅格系统，retchat很多组件也用了table布局。

GPU云服务器云服务器 js缓存的几种方法最基本的几种 html的几种轮播 js的几种数据类型

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

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

使一个div垂直+水平居中的几种方法

摘要：前几天去一家互联网公司面试，面试官问到了这个应该算是比较简单的问题，在我自认为回答正确时，才知道这道题的答案有很多种，下面就让我们一起来探讨一下这个问题思路绝对定位居中原始版这个是我回答出来的，也是被各位所熟知的一种方法，设外层相对定位，内前几天去一家互联网公司面试，面试官问到了这个应该算是比较简单的问题，在我自认为回答正确时，才知道这道题的答案有很多种，下面就让我们一起来探讨一下这...

joyqi 2019-08-29 11:04 评论0 收藏0
(面试题)垂直居中的几种实现方式

摘要：尤其是在实际页面中，有很多特殊的场景，导致水平居中实现起来比较麻烦。这篇文章旨在纪录一些我知道的居中方式。以一道经典面试题为例一个的在一个水平垂直居中，用实现。首先定义元素层和垂直居中无关的样式直接定义在里。相比较水平居中，垂直居中比较复杂点。尤其是在实际页面中，有很多特殊的场景，导致水平居中实现起来比较麻烦。这篇文章旨在纪录一些我知道的居中方式。以一道经典面试题为例：一个200*2...

cheukyin 2019-08-30 11:18 评论0 收藏0
纯CSS实现垂直居中的几种方法

摘要：垂直居中是布局中十分常见的效果之一，为实现良好的兼容性，端实现垂直居中的方法一般是通过绝对定位，，负边距等方法。有了，针对移动端的垂直居中就更加多样化。方法这实际上是方法的变形，移位是通过来实现的。垂直居中是布局中十分常见的效果之一，为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加多样化。方...

FullStackDeveloper 2019-08-30 15:43 评论0 收藏0
纯CSS实现垂直居中的几种方法

摘要：垂直居中是布局中十分常见的效果之一，为实现良好的兼容性，端实现垂直居中的方法一般是通过绝对定位，，负边距等方法。有了，针对移动端的垂直居中就更加多样化。方法这实际上是方法的变形，移位是通过来实现的。垂直居中是布局中十分常见的效果之一，为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加多样化。方...

sourcenode 2019-08-23 16:41 评论0 收藏0
基本方法笔记 - 收藏集 - 掘金

摘要：探讨判断横竖屏的最佳实现前端掘金在移动端，判断横竖屏的场景并不少见，比如根据横竖屏以不同的样式来适配，抑或是提醒用户切换为竖屏以保持良好的用户体验。探讨判断横竖屏的最佳实现 - 前端 - 掘金在移动端，判断横竖屏的场景并不少见，比如根据横竖屏以不同的样式来适配，抑或是提醒用户切换为竖屏以保持良好的用户体验。判断横竖屏的实现方法多种多样，本文就此来探讨下目前有哪些实现方法以及其中的优...

maochunguang 2019-08-20 17:44 评论0 收藏0