css实现垂直居中的几种方式

187J3X1 发布于2019-08-30 13:09 / 2098人阅读

摘要：单行文本使用我是垂直居中文本使用我是垂直居中文本父元素子元素高度确定高度确定将设置为本元素高度的一半父元素子元素高度不确定我会绝对居中额外元素与上两个原理一样多设置了一个额外元素，使额外元素的为为元素的高度的负一半使用

1.单行文本使用line-height


  我是垂直居中文本


//css
child{
 line-height: 100px;
}

2.使用table-cell+vertical-align


  我是垂直居中文本


//css
.parent{
  display: table-cell;
  height: 100px;
  vertical-align: middle;
}

3.父元素、子元素高度确定高度确定position+margin


  


//css  将margin-top设置为本元素高度的一半
.parent{
  position: relative;
  width: 200px;
  height: 100px;
  background: red;
}
.child{
  position: absolute;
  width: 100%;
  height: 30px;
  top: 50%;
  margin-top: -15px;
  background: green;
}

4.父元素、子元素高度不确定


  我会绝对居中


//css
.parent{
  position: relative;
  background: red;
  width: 200px;
  height: 100px;
}
.child{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: green;
}

5.额外元素+margin,与上两个原理一样；多设置了一个额外元素，使额外元素的height为50%,margin-bottom为center元素的高度的负一半-(height + padding)/2


    
    

//css
.parent{
    width: 200px;
    height: 100px;
    background: green;
}
.floater{
    height: 50%;
    margin-bottom: -25px;
}
.child{
    width: 50px;
    height: 50px;
    background: red;
}

6.使用flex

.parent{
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
}

云服务器 GPU云服务器 js继承的几种方式服务器请求的几种方式 java创建对象的几种方式实现垂直居中

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

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

(面试题)垂直居中的几种实现方式

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

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

摘要：元素为未知宽高的元素和元素为为定宽定高自身包含尺寸的元素的元素绝对定位和负边距绝对定位和原理当一个绝对定位元素，其对立定位方向属性同时有具体定位数值的时候，流体特性，具有流体特性绝对定位元素的的填充规则和普通流体元素一模一样参考 1. 元素为未知宽高的元素flexhttp://www.ruanyifeng.com/blo... display: flex; justify-conten...

light 2019-08-29 18:41 评论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
使一个div垂直+水平居中的几种方法

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

joyqi 2019-08-29 11:04 评论0 收藏0