div垂直居中知几种？

AZmake 发布于2019-08-30 14:22 / 2095人阅读

摘要：结构实现在中垂直居中方法一弹性盒子实现方法二和实现方法三方法四方法都是相对定位和绝对定位配合实现但是方式略有不同方法五和实现由于上传图片老是报错，后面会把图片加上

html结构：实现box在wrap中垂直居中

方法一 flex弹性盒子实现

.wrap {
    display: flex;
    align-items: center;
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
  }
  .box {
    width:100px;
    height: 100px;
    background: red;
  }

方法二 relative和absolute实现

  .wrap {
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
  }
  .box {
    position: absolute;
    top: 50%;
    margin-top: -50px;
    width:100px;
    height: 100px;
    background: red;
  }

方法三

.wrap {
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
  }
  .box {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width:100px;
    height: 100px;
    background: red;
  }

方法四

.wrap {
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
  }
  .box {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width:100px;
    height: 100px;
    background: red;
  }

方法2-4 都是相对定位和绝对定位配合实现, 但是方式略有不同

方法五 table-cell和vertical-align实现

.wrap {
    display: table-cell;
    vertical-align: middle;
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
  }
  .box {
    width:100px;
    height: 100px;
    background: red;
  }

由于上传图片老是报错，后面会把图片加上

云服务器 GPU云服务器垂直居中实现垂直居中水平垂直居中文字垂直居中

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

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

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

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

joyqi 2019-08-29 11:04 评论0 收藏0
垂直居中的几种实现方法？

摘要：结构效果如下优点不用受内容高度的限制，简单实现垂直居中缺点不兼容方法二这个方法使用绝对定位的，把它的设置为，设置为负的高度。这意味着对象必须在中指定固定的高度。使用使块级元素垂直居中是很简单的。方法一：把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align属性。结构效果如下：http://jsfiddle.net/chic/4uduzb3t/1/...

sorra 2019-08-28 17:57 评论0 收藏0
(面试题)垂直居中的几种实现方式

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

cheukyin 2019-08-30 11:18 评论0 收藏0
css水平垂直居中

摘要：要让下图中绿色框水平垂直居中，你是怎么实现的，可能每个人都有自己习惯的使用方法。把元素设为方法在父元素中设置和然后设置垂直对齐方式为居中就可以适合父元素高固定的，毕竟要设置行高。本篇博客首发于本人博客水平垂直居中要让下图中绿色框水平垂直居中，你是怎么实现的，可能每个人都有自己习惯的使用方法。下面是我总结的几种方法废话不多说，直接上菜。showImg(http://ooa3lxrpg....

jaysun 2019-08-29 12:39 评论0 收藏0
css水平垂直居中

摘要：要让下图中绿色框水平垂直居中，你是怎么实现的，可能每个人都有自己习惯的使用方法。把元素设为方法在父元素中设置和然后设置垂直对齐方式为居中就可以适合父元素高固定的，毕竟要设置行高。本篇博客首发于本人博客水平垂直居中要让下图中绿色框水平垂直居中，你是怎么实现的，可能每个人都有自己习惯的使用方法。下面是我总结的几种方法废话不多说，直接上菜。showImg(http://ooa3lxrpg....

blankyao 2019-08-01 16:54 评论0 收藏0