CSS居中布局

时间：2020-01-29 12:38:41 收藏：0 阅读：89

CSS居中布局在实际开发中是经常使用的一种布局方式,同时也是面试中会问的基础CSS布局中常见的问题之一。

水平居中

元素的宽未知

方法1.1: text-align:center,适合的元素通常为文档流中的内联元素,例如span,a,img,input等等.

1
2
3

.parent {
  text-align: center;
}

优点：简单快捷，容易理解，兼容性非常好
缺点：只对行内内容有效；属性会继承影响到后代行内内容：如果子元素宽度大于父元素宽度则无效.

方法1.2: text-align:center,适合的元素通常为文档流中的内联元素,将块级元素转换为inline

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

方法2.1: 定位+CSS3 transform

.parent {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

优点：简单快捷，容易理解，不管是块级还是行内元素都可以实现
缺点：代码较多；脱离文档流；使用transform兼容性不好（ie9+）

方法2.2: 定位+margin:0,auto

.parent {
  position: relative;
}
.son {
  position: absolute;
  width: 100px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

优点：简单快捷，容易理解，不管是块级还是行内元素都可以实现
缺点：代码较多；脱离文档流；使用transform兼容性不好（ie9+）

方法3: flex布局

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

优点：功能强大；简单方便；容易理解，适用于子元素为浮动，绝对定位，内联元素，均可水平居中。
缺点：PC端兼容性不好，移动端（Android4.0+）

元素的宽已知

方法1: margin:0 auto,适合单个块级元素,在margin有节余的同时如果左右margin设置了auto，将会均分剩余空间.

.son{
  width: 100px; /*必须定宽*/
  margin: 0 auto;
}

优点：简单快捷，容易理解，兼容性非常好
缺点：必须定宽，并且值不能为auto；宽度要小于父元素，否则无效.

方法2: margin-left.

.parent{
  height: 200px;
  width: 200px;
  position: relative;
}
.son{
  position: absolute;
  left: 50%;
  margin-left: -50px;
  width: 100px;
  height: 100px;
}

优点：使用margin-left兼容性好；不管是块级还是行内元素都可以实现
缺点：代码较多；脱离文档流；使用margin-left需要知道宽度值；

垂直居中

元素的高未知

方法1: 定位+CSS3 transform

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

优点：简单快捷，容易理解，不管是块级还是行内元素都可以实现
缺点：代码较多；脱离文档流；使用transform兼容性不好（ie9+）

方法2.1: flex布局

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

方法2.2: flex布局

.parent{
  display: flex;
}
.son{
  align-self: center;
}

优点：功能强大；简单方便；容易理解，适用于子元素为浮动，绝对定位，内联元素，均可水平居中。
缺点：PC端兼容性不好，移动端（Android4.0+）

元素的高已知

方法1.1: line-height,文字内容公用水平中垂线.

.parent{
  height: 150px;
  line-height: 150px;  /*与height等值*/
}

优点：简单快捷，容易理解，兼容性非常好
缺点：只能用于单行行内内容；要知道高度的值

方法1.2: line-height.

.parent{  /*或者用span把所有文字包裹起来，设置display:inline-block转换成图片的方式解决*/
  height: 150px;
  line-height: 30px;  /*元素在页面呈现为5行,则line-height的值为height/5*/
}

优点：简单；兼容性好
缺点：只能用于行内内容；需要知道高度和最终呈现多少行来计算出line-height的值，建议用span包裹多行文本

方法2: margin:auto 0.

.parent{
  position: relative;
}
.son{
  position: absolute;
  margin: auto 0;
  top: 0;
  bottom: 0;
  height: 50px;
}

优点：简单；兼容性好
缺点：脱离文档流

方法3: 定位+CSS3 transform

.parent {
  position: relative;
}
.son {
  position: absolute;  /*子绝*/
大专栏  CSS居中布局/>  top: 50%;  /*父元素高度一半,这里等同于top:75px;*/
  transform: translateY(-50%);  /*自身高度一半,这里等同于margin-top:-25px;*/
}

优点：简单快捷，容易理解，不管是块级还是行内元素都可以实现
缺点：代码较多；脱离文档流；使用transform兼容性不好（ie9+）

方法4: 定位+tabel-cell

.parent{
    display: table-cell;
    vertical-align: middle;
}

优点：简单快捷，容易理解，兼容性好（ie8+）
缺点：设置tabl-cell的元素，宽度和高度的值设置百分比无效，需要给它的父元素设置display: table; 才生效；table-cell不感知margin，在父元素上设置table-row等属性，也会使其不感知height；设置float或position会对默认布局造成破坏，可以考虑为之增加一个父div定义float等属性；内容溢出时会自动撑开父元素

方法5: margin-top.

.son {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
}

优点：使用margin-top兼容性好；不管是块级还是行内元素都可以实现
缺点：灵活性差，不能自适应，宽高不支持百分比尺寸和 min-/max- 属性

水平垂直居中

行内元素

行内元素,行内块级元素:text-align: center; 控制行内内容相对于块父元素水平居中,然后就是line-height和vertical-align使其垂直居中，font-size: 0; 是为了消除近似居中的bug

.parent{
  height: 150px;
  line-height: 150px;  /*行高的值与height相等*/
  text-align: center;
  font-size: 0;   /*消除幽灵空白节点的bug*/
}
.son{
  /*display: inline-block;*/  /*如果是块级元素需改为行内或行内块级才生效*/
  vertical-align: middle;
}

优点：代码简单；兼容性好（ie8+）
缺点：只对行内内容有效；需要添加font-size: 0; 才可以完全的垂直居中；不过需要注意html中#parent包裹#son之间需要有换行或空格；熟悉line-height和vertical-align的基友关系较难

table-cell方法

CSS Table，使表格内容垂直对齐方式为middle,然后根据是行内内容还是块级内容采取不同的方式达到水平居中

.parent{
  height: 150px;
  width: 200px;
  display: table-cell;
  vertical-align: middle;
  /*text-align: center;*/   /*如果是行内元素就添加这个*/
}
.son{
  width: 100px;
  height: 50px;
  /*margin: 0 auto;*/    /*如果是块级元素就添加这个*/
}

优点：代码简单；兼容性好（ie8+）
缺点：设置tabl-cell的元素，宽度和高度的值设置百分比无效，需要给它的父元素设置display: table; 才生效；table-cell不感知margin，在父元素上设置table-row等属性，也会使其不感知height；设置float或position会对默认布局造成破坏，可以考虑为之增加一个父div定义float等属性；内容溢出时会自动撑开父元素

绝对定位

方法1: 定位+CSS3 transform

.parent{
  position: relative;
}
.son{
  position: absolute;
  top: 50%;
  left: 50%;
  /*定宽高时等同于margin-left:负自身宽度一半;margin-top:负自身高度一半;*/
  transform: translate(-50%,-50%);
}

优点：不管是块级还是行内元素都可以实现
缺点：代码较多；脱离文档流；使用transform兼容性不好（ie9+）

方法2: 定位+margin

.parent{
  position: relative;
}
.son{
  width:100px;
  height:100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left:50px;
  margin-right:50px;
}

优点：兼容性好；
缺点：代码较多；脱离文档流；需要知道宽高;灵活性差，不能自适应，宽高不支持百分比尺寸和 min-/max- 属性

绝对居中

当top、bottom为0时,margin-top&bottom设置auto的话会无限延伸占满空间并且平分；当left、right为0时,margin-left&right设置auto的话会无限延伸占满空间并且平分

.parent{
  position: relative;
}
.son{
  position: absolute;
  margin: auto;
  width: 100px;
  height: 50px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

优点：无需关注宽高；兼容性较好(ie8+)
缺点：代码较多；脱离文档流

flex方法

方法1：

.parent{
  display: flex;
}
.son{
  margin: auto;
}

方法2：

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

方法3：

.parent{
  display: flex;
  justify-content: center;
}
.son{
  align-self: center;
}

优点：简单灵活；功能强大
缺点：PC端兼容性不好，移动端（Android4.0+）