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

王小优
王小优
王小优
231
文章
0
评论
2015年10月24日 评论 1,754 2359字阅读7分51秒

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

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

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

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

水平居中

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

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

  1. .center-children {
  2. text-aligncenter;
  3. }

是block块元素吗?

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

  1. .center-me {
  2. margin: 0 auto;
  3. }

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

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

  1. .inline-block-center {  
  2. text-aligncenter;  
  3. }  
  4. .inline-block-center div {  
  5. displayinline-block;  
  6. text-alignleft;  
  7. }  

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

  1. .flex-center {  
  2. display: flex;  
  3. justify-contentcenter;  
  4. }  

垂直居中

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

单行?

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

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

  1. .link {  
  2. padding-top30px;  
  3. padding-bottom30px;  
  4. }  
  5. .center-text-trick {  
  6. height100px;  
  7. line-height100px;  
  8. whitewhite-spacenowrap;  
  9. }  

多行?

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

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

  1. .center-table p {  
  2. displaytable-cell;  
  3. margin: 0;  
  4. backgroundblack;  
  5. colorwhite;  
  6. padding20px;  
  7. border10px solid white;  
  8. vertical-alignmiddle;  
  9. }  

是block块元素吗?

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

  1. .parent {  
  2. positionrelative;  
  3. }  
  4. .child {  
  5. positionabsolute;  
  6. top: 50%;  
  7. height100px;  
  8. margin-top: -50px/* account for padding and border if not using box-sizing: border-box; */  
  9. }  

不知道元素的高度。

  1. .parent {  
  2. positionrelative;  
  3. }  
  4. .child {  
  5. positionabsolute;  
  6. top: 50%;  
  7. transform: translateY(-50%);  
  8. }  

你可以使用flexbox吗?

  1. .parent {  
  2. display: flex;  
  3. flex-direction: column;  
  4. justify-contentcenter;  
  5. }  

水平垂直居中

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

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

  1. .parent {  
  2. positionrelative;  
  3. }  
  4. .child {  
  5. width300px;  
  6. height100px;  
  7. padding20px;  
  8. positionabsolute;  
  9. top: 50%;  
  10. left: 50%;  
  11. margin: -70px 0 0 -170px;  
  12. }  

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

  1. .parent {  
  2. positionrelative;  
  3. }  
  4. .child {  
  5. positionabsolute;  
  6. top: 50%;  
  7. left: 50%;  
  8. transform: translate(-50%, -50%);  
  9. }  

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

  1. .parent {  
  2. display: flex;  
  3. justify-contentcenter;  
  4. align-items: center;  
  5. }  
若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微博
  • 微博扫一扫
  • weinxin
王小优
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: