CSS笔记（〇）：元素居中

CSS居中布局技巧

最新推荐文章于 2025-09-11 22:10:09 发布

转载最新推荐文章于 2025-09-11 22:10:09 发布 · 50 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/chaosannals/blog/716655

文章标签：

#python

本文介绍了如何使用CSS实现元素的水平和垂直居中，包括利用margin属性进行水平居中的传统方法，以及使用vertical-align和伪元素实现垂直居中的技巧。此外，还介绍了CSS3 flex布局简化居中操作的方法。

2019独角兽企业重金招聘Python工程师标准>>>

0.水平居中

元素水平居中需求比较常见，常见的做法是通过margin来完成。

元素默认的margin-left和margin-right应该都是0。

而元素水平居中其实只需要把margin-left和margin-right都设置成auto就可以了。

.demo {
    margin-left:auto;
    margin-right:auto;
}

网上有一种常见的写法是：

.demo {
    margin: 0 auto;
}

这样写简短些，不过在设置margin-left和margin-right为auto时，也设置了margin-top和margin-bottom为0。

1.垂直居中

垂直居中做起来比较麻烦，常见的一种方法是通过vertical-align:middle来实现。

可是vertical-align的效用很奇怪，居然是让兄弟元素向自己对齐（居然是作用在别的元素身上）。

下面使用伪元素first-child 和 before 配合vertical-align实现垂直居中：

.demo-parent > * {
    display: inline;
    vertical-align:middle;
}

.demo-parent:first-child:before {
    content: "";
    height: 100%;
    display:inline-block;
    vertical-align:middle;
}

0.由于vertical-align作用于“同行”兄弟元素，所以兄弟元素至少是display:inline这样可共行的。由于是相互对其，所以也需要vertical-align属性。

1.由于vertical-align对齐是以自己的高度做参照，伪元素height:100%是为了和父元素一样宽，display:inline-block是使内容为空的该伪元素可以有高度。

2.注意vertical-align其实是一个伪元素的属性，并非demo-parent的。

demo-parent的子元素由于这个兄弟伪元素而垂直居中。

前提是同行，如果元素被挤到下一行，这个伪元素的vertical-align并不对其起作用。

2.CSS3中简便的写法

CSS3为display属性添加了flex这个新的可用值，在该值下只需要简单地给父元素设置几个属性就可以实现居中。

justify-content:center;使得子元素水平居中

align-items:center;使得子元素垂直居中

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

转载于:https://my.oschina.net/chaosannals/blog/716655