CSS之各种居中

Taste 发布于2019-08-30 14:13 / 1848人阅读

摘要：前言在我看来，入门的路上最烦人的就是的各种居中了。在我初学过程中，居中这个问题经常困扰到我。使用伪元素垂直居中这种方法的前提是要是行内元素才能进行居中。结语以上的方法基本上可以用完成各种情况的居中。

前言

在我看来，入门CSS的路上最烦人的就是CSS的各种居中了。在我初学CSS过程中，居中这个问题经常困扰到我。那为什么CSS的居中这么烦人呢？ 我认为，这是因为CSS的居中方法以及它的适用范围太多了，而导致应用时很难分清到底哪个有效。下面我就简单地梳理一下CSS的居中方法。

水平居中 1.行内元素的水平居中

对于行内元素（如text、link或inline-*元素）的水平居中：

.inline {
  text-align: center;
}

这种方法对于inline-block、inline-table等等都有效。

2.块级元素的水平居中

对于块级元素（如div、p等）的水平居中：

.block {
    margin: 0 auto;
}

这种方法就是把margin-left和margin-right设置成auto。但这种方法前提是你要设置好块级元素的宽度，否则它的宽度就会铺满其父级元素。

3.多个块级元素的水平居中

当需要多个块级元素在一行内居中时，我们可以把它们设置为inline-block或者flex。

1）inline-block

.inline-block-center {
    display: inline-block;
    text-align: right;
}

2）flexbox

.flex-center {
  display: flex;
  justify-content: center;
}

垂直居中

垂直居中比水平居中要更加复杂，下面我会按照思考的过程来逐步梳理垂直居中的方法（包括不可行的方法）：

1）

既然块级元素的水平居中可以使用margin: 0 auto，那么垂直居中能不能用margin: auto 0呢？不能。因为margin-top如设为auto，默认值为0。

2）

OK，那我手动利用calc指定margin-top

margin-top: calc(50%-50px);

这样总行了吧？不行。因为margin-top的百分比竟然是以父元素的宽度为参照。

好吧，那我用relative吧：

position: relative;
top: calc(50%-50px);

这次总归行了。但是这种方法缺点就是元素的高度不能变。

4）

对于inline-element和table-cell，垂直居中同样可以使用vertical-align:

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

但这时由于table-cell是inline，宽度将会变成和子元素一样，而当强制指定width为100%时，子元素高度会变成和父元素一样。

5）

使用伪元素：


    垂直居中

.box {
  width: 400px;
  height: 300px;
  border:1px solid red;
  text-align:center;
}

.box:before {
  content:"";
  display:inline-block;
  height: 100%;
  vertical-align:middle;
}

.box span {
  vertical-align:middle;
}

这种方法的前提是要是行内元素才能进行居中。
那为什么添加伪元素在这里会有效呢？ 根据W3C标准对vertical-align的定义是：该属性会影响由一个行内级元素生成的盒的行框内部的垂直定位。

那么伪元素在这里就是生成了一个空的100%高度的行内盒，然后行内元素以这个行内盒为基线进行垂直居中。

使用flex布局：

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

水平垂直居中

关于水平垂直居中，方法也有很多，很繁琐。有些可以把水平居中的方法和垂直居中的方法结合（例如添加伪元素方法的text-align + vertical-align）,在这里我就不一一介绍，只是介绍一种最好的方法——几乎万能的flex布局：

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

justify-content影响flex-item在主轴上的位置；而align-item则会影响flex-item在交叉轴上的位置。

结语

以上的方法基本上可以用CSS完成各种情况的居中。如果读者觉得有补充或者哪个地方讲述错误，欢迎指正。

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

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

CSS之各种居中

摘要：前言在我看来，入门的路上最烦人的就是的各种居中了。在我初学过程中，居中这个问题经常困扰到我。使用伪元素垂直居中这种方法的前提是要是行内元素才能进行居中。结语以上的方法基本上可以用完成各种情况的居中。前言在我看来，入门CSS的路上最烦人的就是CSS的各种居中了。在我初学CSS过程中，居中这个问题经常困扰到我。那为什么CSS的居中这么烦人呢？我认为，这是因为CSS的居中方法以及它的适...

Labradors 2019-08-02 16:01 评论0 收藏0
CSS之各种居中

摘要：转自个人博客本博客讨论居中情况设定为总宽度不定内容宽度不定的情况。改变大小时，仍然居中。宽高改变时，不再是居中效果。配合优点居中元素不对其他元素产生影响。水平居中当父元素设置时，子元素为，默认为内容宽度。转自个人博客本博客讨论居中情况设定为总宽度不定,内容宽度不定的情况。（改变大小时，仍然居中）。特别说明：在元素设置position:absolute;来设置居中效果时，除去博客...

happyfish 2019-08-28 18:29 评论0 收藏0
老生常谈之CSS的垂直居中

摘要：在通常情况下，对那些需要居中的元素来说，其尺寸往往是由其内容来决定的。虽然没有垂直居中效果，但也是完全可以接受的。的另一个好处在于，它还可以将匿名容器即没有被标签包裹的文本节点垂直居中。主要摘自：《CSS 揭秘》，强烈推荐的一本书。 44 年前我们就把人类送上月球了，但现在我们仍然无法在 CSS 中实现垂直居中。——James Anderson(https://twitter.co...

CompileYouth 2019-08-30 15:55 评论0 收藏0
CSS之元素居中

摘要：多个块级元素按行放置将块级元素设置为行内元素父元素内容居中。块级元素使用绝对定位。需要知道子元素的高度。水平垂直居中思路跟之前一样。水平方向行内元素 .center-children { text-align: center; } 适用于行内元素，行内块元素。块级元素 .center-children { margin: 0 auto; } margin左右设置为auto...

wapeyang 2019-08-30 13:20 评论0 收藏0
css - 收藏集 - 掘金

摘要：绝对底部前端掘金来自国外的设计达人，纯，可以实现当正文内容很少时，底部位于窗口最下面。有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。 CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案...

phpmatt 2019-08-29 12:41 评论0 收藏0