对号入座选方法 CSS居中完全指南

2017-2-28 15:51 来自简书 15,511 8 8
[摘要]

在web前端开发中,元素居中是一个普遍常见的问题,css实现的方法也是有很多种,那么哪一种才算最适合当前居中需求的解决方案呢?本文列出几种css使元素居中的方法,读者朋友可以对号入座,选择最适合的居中方法。

CSS 的居中问题是一个经常被抱怨的东西。为啥居个中要这么麻烦?我觉得可能问题不在于难,而在于每次一查,有各种各样的解决方案,你选了一个,能正常地居中了,但是心里又会在想:选这个是不是最好的呢?会不会有什么问题?

对号入座选方法 CSS居中完全指南

各种犹豫不决?那就来创建一个决策树吧!

水平居中

是inline元素或者inline-*元素吗?(比如text或者links)?

给inline元素一个block的父元素,然后设置父元素css为text-align:center 即可搞定。

.center-children {
text-align: center;
 }

是block块元素吗?

把一个块级元素的margin-left和margin-right设置成auto,再给定一个固定的width,即可水平居中。一般我们会写成:margin:0 auto;

.center-me {
 margin: 0 auto;
 }

有多个block块级元素的话,怎么居中?

如果你想在一行里让多个块级元素居中,你可以把这些块级元素的display设置成inline-block(同时注意设置这些元素的父级元素text-align:center),或者使用flexbox.

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

如果使用flexbox,直接对父元素做如下设置即可:

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

垂直居中

是inline元素或者inline-*元素吗?(比如text或者links)?

单行?

1.设置相同的padding-top和padding-bottom.

2.如果1不能使用,可以尝试将元素的line-height和height设置成相等的值。

.link {
 padding-top: 30px;
 padding-bottom: 30px;
 }
 .center-text-trick {
 height: 100px;
 line-height: 100px;
 white-space: nowrap;
 }

多行?

设置相同的padding-top和padding-bottom.

如果1不能使用,也许text所在的元素是一个table cell,可以使用 vertical-align来处理。也可以使用flexbox.

.center-table p {
 display: table-cell;
 margin: 0;
 background: black;
 color: white;
 padding: 20px;
 border: 10px solid white;
 vertical-align: middle;
 }

是block块元素吗?

知道元素的高度。 如果你知道元素的高度,那么像下面这样就可以:

.parent {
 position: relative;
 }
 .child {
 position: absolute;
 top: 50%;
 height: 100px;
 margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
 }

不知道元素的高度。

.parent {
 position: relative;
 }
 .child {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 }

你可以使用flexbox吗?

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

水平垂直居中

一般结合上面两个技巧就可以做到水平和垂直居中。不过也可以分成下面这三个阵营:

元素有固定的宽度和高度(设置absolute,50%,50%的值配合使用负的长度和宽度值可以很好地得到跨浏览器的支持)

.parent {
 position: relative;
 }
 .child {
 width: 300px;
 height: 100px;
 padding: 20px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin: -70px 0 0 -170px;
 }

元素没有固定的宽度和高度(在top和left上同时使用transform属性和负的translate百分数,注意这里的百分数是基于当前元素的)

.parent {
 position: relative;
 }
 .child {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 }

可以使用flexbox吗?注意两个方向上都要设置center

.parent {
 display: flex;
 justify-content: center;
 align-items: center;
 }
本文最后更新于2017年3月1日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助微信扫一扫赞助

  • 支付宝扫一扫赞助
  • 微信扫一扫赞助
  • 声明:本文来自 简书,版权归原作者所有,内容仅出于分享之目的,不代表 雅兮网 观点!
    目前评论:8   其中:访客  0   博主  0
    加载中...
    1. 下辈子 1
      7年前 (2017-03-23) 0楼

      我加一个,垂直水平居中的。
      div{position:absolute;
      margin:auto;
      top:0;
      left:0;
      bottom:0;
      right:0;}

    2. 7年前 (2017-03-03) 0楼

      帮助很大啊

    3. 7年前 (2017-03-01) 0楼

      学习一下!

    4. 7年前 (2017-03-01) 0楼

      [强] 博主对CSS越来越牛了,学习中。

    5. 7年前 (2017-03-01) 0楼

      我只会用center

    6. 7年前 (2017-02-28) 0楼

      css确实比较烦人

    7. 7年前 (2017-02-28) 0楼

      干活呀!收藏了,顺便支持一下!
      CSS真心很有益“折腾”的,哈哈!

    发表评论

    疑问 调皮 难过 抠鼻 吓 微笑 可爱 坏笑 惊讶 发呆 疑问 大兵 偷笑 咒骂 发怒 白眼 鼓掌 得意 擦汗 亲亲 大哭 呲牙 晕 强

    分享 8 8 15,511
    Top