css8种垂直方法，8种水平方法

水平居中

1.行内元素

父元素 text-align: center

2.块级元素

方法1:

子元素 margin: 0 auto;

子元素会设置宽度，因为块级元素默认独占一行

方法2:父类应用width:fit-content,子类浮动

父元素
.parent{
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width:fit-content;
    margin:0 auto;
}

子元素
.son {
    background: #ccc;
    float: left;
}

html:

  

  

  



parent: [width:fit-content(css3)]
配合margin可以轻松实现水平居中
支持情况：
    目前只支持Chrome 和 Firefox浏览器.
https://caniuse.com/#search=fit-content

方法3:父类应用display:flex;

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

html:

  

  

  



flexbox两种方法之一
display: flex;  flexbox2012版 

支持：
    Chrome 21 +
    Safari 6.1 +
    Firefox 22 +
    Opera（和Opera Mobile）12.1 +
    IE 11+

方法4:父类应用display: box;

.parent {
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  
  display: -o-box;
  -o-box-orient: horizontal;
  -o-box-pack: center;
   
  display: -ms-box;
  -ms-box-orient: horizontal;
  -ms-box-pack: center;
      
  display: box;
  box-orient: horizontal;
  box-pack: center;

}

html:

    

    

    



flexbox两种方法之二
display: box;  flexbox2009版 

支持是：
    Chrome any
    Firefox 2+
    Safari 3.1+...
    IE 9 +
    Opera any

方法5: 使用绝对定位,和css3新增的transform

关键：transform

.parent {
    position: relative;
}

.son {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

html:

    

方法6: 使用绝对定位, margin-left:负值,子类width固定

关键字：宽度固定，margin-left: -0.5宽度，position

.parent {
    position: relative;
}

.son {
    position: absolute;
    left: 50%;
    margin-left: -25px;
  
    width: 50px(固定);
    background: #ccc;
}

html:

    



子类width固定

方法7: 使用绝对定位，以及left:0;right:0;margin:0 auto; 子类width固定

.parent {
    position: relative;
}

.son {
    position: absolute;
    width: 60px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

html:

    


子类width固定

垂直居中

1.行内元素

.parent {
    line-height: 150px;
}

2.行内块级元素

方法1: display: inline-block, vertical-align:middle和一个伪元素让内容块处于容器中央

.parent::after {
    content: '';
    height: 100%;
}

.parent::after, .son {
    display: inline-block;
    vertical-align: middle;
}

html:

    

    



vertical-align对齐方式

方法2: 父元素display: table; 子元素display: table-cell; vertical-align: middle;

.parent {
    width: 100%;
    height: 100%;
    display: table;
}

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

html:

    

        sfsfsdf
    


son高度动态改变

在table中，对td,th  可以使用vertical-align
支持情况:

方法3: 父元素使用flex布局 2012版

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


html：

    

    
    

    


son:可不定义宽高

ie8,ie9不支持
需要加前缀

方法5: 父元素使用flex布局 2009版

.parent {
    display: box;
    box-orient: vertical;
    box-pack: center;
    
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    
    display: -moz-box;
    -moz-box-orient: vertical;
    -moz-box-pack: center;
    
    display: -o-box;
    -o-box-orient: vertical;
    -o-box-pack: center;
    
    display: -ms-box;
    -ms-box-orient: vertical;
    -ms-box-pack: center;
}

html：

    

    
    

    


son:可不定义宽高
ie不支持
需要加前缀

方法5: 可用 transform , 设置父元素相对定位(position:relative), 子元素如下css样式:

.parent {
    positon: relative;
}

.son {
    position:absolute;
    top:50%;
    -webkit-transform: translate(-50%,-50%);  
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

方法6:设置父元素相对定位(position:relative), 子元素如下css样式:

.parent {
    positon: relative;
}

.son {
    position: absolute;
    top: 50%;
    height:固定;
    margin-top: -0.5高度;
}

son:固定高度
优点:

缺点:
父元素空间不够时, 子元素可能不可见(当浏览器窗口缩小时,滚动条不出现时).如果子元素设置了overflow:auto, 则高度不够时, 会出现滚动条.

方法7:设置父元素相对定位(position:relative), 子元素如下css样式:

.parent {
    positon: relative;
}

.son {
    position: absolute;
    height:固定;
    margin: auto 0;
    top: 0;
    bottom: 0;
}

son:固定高度

优点:简单

缺点:没有足够空间时, 子元素会被截断, 但不会有滚动条.

例子