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

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

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

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

水平居中

\r\n是inline元素或者inline-*元素吗?(比如text或者links)?\r\n\r\n给inline元素一个block的父元素,然后设置父元素css为text-align:center 即可搞定。\r\n

.center-children {\r\ntext-align: center;\r\n }

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

.center-me {\r\n margin: 0 auto;\r\n }

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

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

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

.flex-center {\r\n display: flex;\r\n justify-content: center;\r\n }

\r\n

垂直居中

\r\n是inline元素或者inline-*元素吗?(比如text或者links)?\r\n\r\n单行?\r\n\r\n1.设置相同的padding-top和padding-bottom.\r\n\r\n2.如果1不能使用,可以尝试将元素的line-height和height设置成相等的值。\r\n

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

\r\n多行?\r\n\r\n设置相同的padding-top和padding-bottom.\r\n\r\n如果1不能使用,也许text所在的元素是一个table cell,可以使用 vertical-align来处理。也可以使用flexbox.\r\n

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

\r\n是block块元素吗?\r\n\r\n知道元素的高度。 如果你知道元素的高度,那么像下面这样就可以:\r\n

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

\r\n不知道元素的高度。\r\n

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

\r\n你可以使用flexbox吗?\r\n

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

\r\n

水平垂直居中

\r\n一般结合上面两个技巧就可以做到水平和垂直居中。不过也可以分成下面这三个阵营:\r\n\r\n元素有固定的宽度和高度(设置absolute,50%,50%的值配合使用负的长度和宽度值可以很好地得到跨浏览器的支持)\r\n

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

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

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

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

.parent {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }
瓜分支付宝10亿红包

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

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

      我加一个,垂直水平居中的。\r\ndiv{position:absolute;\r\nmargin:auto;\r\ntop:0;\r\nleft:0;\r\nbottom:0;\r\nright:0;}

    2. 12个月前 (03-03) 6楼

      帮助很大啊

    3. 12个月前 (03-01) 5楼

      学习一下!

    4. 12个月前 (03-01) 4楼

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

    5. 12个月前 (03-01) 板凳

      我只会用center

    6. 1年前 (2017-02-28) 椅子

      css确实比较烦人

    7. 1年前 (2017-02-28) 沙发

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

    发表评论

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

    8 7 9,025
    Top