css垂直水平居中解决方案

taoszu 发布于2019-08-29 14:18 / 2556人阅读

摘要：写在前面垂直水平居中即垂直与水平方向上都要居中，也就是视觉效果中的，处于视图的正中间。我们把需要垂直水平居中的设置为。使用使块级元素垂直居中是很简单的。

写在前面：

垂直水平居中即垂直与水平方向上都要居中，也就是视觉效果中的，处于视图的正中间。下面，我们来讲讲几个css中常用的垂直水平居中的解决方案

方法1:

1、把外层的div的显示方式设置为table，即display: table;

2、把内层的div的显示方式设置为table-ceil，即display: table-ceil;

这样一来，我们就可以把这格html结构看成表格和表格中的一个小格。由于表格中只有一个ceil，所以它会自动撑开整个表格，给它设置宽高是无效的，它的宽高是wrapper的宽高。ceil中的内容content就可以自动垂直居中了。

其中：

垂直居中：利用vertical-align: middle;

水平居中：利用text-align: center;

具体代码如下：

</>复制代码 
 
   
     Hello world!

css代码：

</>复制代码 
  .wrapper {
      display: table;
      width: 400px;
      height: 200px;
      background-color: red;
   }
   .ceil {
      display: table-cell;
      vertical-align: middle;
      background-color: blue;
      text-align: center;
   }

效果如下：

接着我们把content中的内容加长看看效果：

从上面可以看到，wrapper本来应该是红色背景的，但是现在整个ceil撑开了整个表格，所以把wrapper的背景覆盖了，呈现出蓝色。

</>复制代码 
优点：

content 可以动态改变高度(不需在 CSS 中定义)。当 wrapper 里没有足够空间时，content不会被截断，也就是说content会自动撑开wrapper

</>复制代码 
缺点：

实现起来比较繁琐，需要额外嵌套的标签。

方法2：

绝对定位法。
1、我们把需要垂直水平居中的position设置为absolute。
2、设置top为0， left为0，margin为宽高一半的负值。即把盒先一种偏中间的地方，然后再进行微调：

</>复制代码 
  Hello World!

</>复制代码 
.container{
   position: relative;
   width: 400px;
   height: 300px;
   background-color: red;
}
.content{
   position: absolute;
   width: 100px;
   height: 100px;
   background-color: blue;
   top: 50%;
   left: 50%;
   margin-top: -50px;  // 高的一半，视实际情况而定
   margin-left: -50px;  // 宽的一半，视实际情况而定
}

注意：绝对定位absolute，是相对于最近非static的祖先元素进行定位的，所以我们要在其相对定位的元素上定义display属性。

同样当文字溢出的时候：

</>复制代码 
优点：

适用于所有浏览器

不需要嵌套标签

</>复制代码 
缺点：

由于高度是限定好的，没有足够空间时，content会溢出，这时我们可以设置：overflow:auto; 这时当溢出的时候就会出现滚动条。

方法3:

在方法2的基础上进行改动，把margin负值改为transform和 translate

</>复制代码 
.container{
   position: relative;
   width: 400px;
   height: 300px;
   background-color: red;
}
.content{
   position: absolute;
   background-color: blue;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

</>复制代码 
优点，不需要定义宽高，灵活性高缺点：仍要注意截断问题

方法4:

这个方法使用了 position:absolute，有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0;。但是因为它有固定高度，其实并不能和上下都间距为 0，因此 margin:auto; 会使它居中。使用 margin:auto;使块级元素垂直居中是很简单的。

</>复制代码 
 Content here

</>复制代码 
.content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 240px;
    width: 70%;
}

</>复制代码 
优点：

简单

</>复制代码 
缺点：

IE(IE8 beta)中无效

无足够空间时，content 被截断，但是不会有滚动条出现

方法5:

最常用的单行文本居中
这个方法只能将单行文本居中。
1、把 line-height设置为那个对象的 height 值使文本垂直居中
2、把 text-align 设置为center，使文本水平居中

</>复制代码 
Hello world!

</>复制代码 
.content {
    height: 100px;
    line-height: 100px;
    text-align: center;
}

</>复制代码 
优点：

适用于所有浏览器

无足够空间时不会被截断

</>复制代码 
缺点：

只对文本有效(块级元素无效)

多行时，断词比较糟糕

这个方法在小元素上非常有用，例如使按钮文本或者单行文本居中。

方法6:

完美居中方案 —— flex布局

</>复制代码 
.parent{
    display : flex;
    width : 300px;
    height : 300px;
    background-color : red;
}
.child{
    width : 100px;
    height : 50px;
    margin : auto;
    background-color: green;
}

</>复制代码 
关键点：
1、display：flex；
2、margin：auto；

参考资料：
css实现垂直居中的5种方法

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

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

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

【前端】这可能是你看过最全的css居中解决方案了~

摘要：水平居中行内元素解决方案适用元素文字，链接，及其其它或者类型元素，，部分代码文字元素链接元素链接元素链接元素部分代码解决方案将元素包裹在一个属性为的父级元素中如设置这个父级元素属性即可现在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行内元素解决方案适用元素：文字，链接，及其其它inline或者inline-*类型元素（inline-block，inline-table，i...

csRyan 2019-08-30 13:54 评论0 收藏0
【前端】这可能是你看过最全的css居中解决方案了~

摘要：水平居中行内元素解决方案适用元素文字，链接，及其其它或者类型元素，，部分代码文字元素链接元素链接元素链接元素部分代码解决方案将元素包裹在一个属性为的父级元素中如设置这个父级元素属性即可现在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行内元素解决方案适用元素：文字，链接，及其其它inline或者inline-*类型元素（inline-block，inline-table，i...

Simon 2019-08-01 18:31 评论0 收藏0
【基础】这15种CSS居中的方式，你都用过哪几种？

摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...

Apollo 2019-08-30 14:15 评论0 收藏0
【基础】这15种CSS居中的方式，你都用过哪几种？

摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...

Scholer 2019-08-02 16:14 评论0 收藏0
【基础】这15种CSS居中的方式，你都用过哪几种？

摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...

mayaohua 2019-08-29 18:44 评论0 收藏0
对css居中的一点总结

摘要：为了更好的加深对居中的理解，搜集和阅读相关资料，发现不错的文章将其整理出来。在学习前端的过程中，发现元素和文本的水平居中和垂直居中，是经常会出现的问题，在实际工作中也会经常碰到。居中的技巧有很多，但在编写代码的过程中，发现有时候技巧管用，有时候不管用，于是就将每个知道的方案都试一遍，找到合适的。这种情况究其原因是对居中的认识不够深入，只是停留在实现需求的水平上。为了更好的加深对居中的...

BenCHou 2019-08-29 11:17 评论0 收藏0