CSS 垂直居中_html/css_WEB-ITnose

一、垂直居中：单行的行内元素解决方案

居中元素：单行的行内元素，即inline或者inline-*类型元素，如文字、链接等

解决方案：将该行内元素的height、inline-height设置为其父元素的高度

HTML

     hello,gbtags.comhello,gbtags.comhello,gbtags.com a >
div >

CSS

#container {
    background:  #222;
    height:  200px;
}
a {
     /* height: 200px; */
    line-height:  200px;
    color:  #fff;
}

 

二、垂直居中：多行的行内元素解决方案

居中元素：多行的行内元素

解决方案：组合使用display:table-cell和vertical-align:middle属性来定义需要居中元素的父元素

HTML

     
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis blanditiis optio accusamus quia sapiente at labore consectetur in quasi veritatis possimus quod nihil aliquam vero saepe rem quas. Ratione eligendi!
   a >  
div >

CSS 

#container {
    width:  300px;
    height:  300px;
    background:  #222;
     /* 以下属性垂直居中 */
    display:  table-cell;
    vertical-align:  middle;
}
a {
    color:  #fff;
}

 

三、垂直居中：已知高度的块状元素解决方案

居中元素：块级元素，如div

解决方案：将待居中元素设置为绝对定位，并将其margin-top值设置为待居中元素高度的一半的负值。

HTML

div >

CSS

div {
    width:  100px;
    height:  100px;
    background:  #222;
}
/* 以下为居中代码 */
.item {
    position:  absolute;
    top:  50%;
    margin-top:  -50px;
    padding:  0;     /* 如果有padding设置，相对计算下margin-top的值 */
}

 

四、垂直居中：未知高度的块状元素解决方案

居中元素：块级元素，如div，但不知其高度 

解决方案：使用CSS3的transform属性

HTML

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet sint repellendus ab aut quisquam eligendi est in deleniti.
div >

CSS 

div {
    width:  150px;
    background:  #222;
    color:  #fff;
}
/* 以下为居中代码 */
.item {
    position:  absolute;
    top:  50%;
    transform:  translateY(-50%);
}

 

五、水平垂直居中：已知宽度和高度的元素解决方案

居中类型：垂直和水平同时居中（前提是知道元素的高度和宽度）

解决方案：设置元素 绝对定位，并设置margin-top（高度/2）和margin-left值为（宽度/2）的负值

HTML

div >

CSS

div {
    width:  150px;
    height:  250px;
    background:  #222;
    color:  #fff;
}
/* 以下为居中代码 */
.item {
    position:  absolute;
    top:  50%;
    left:  50%;
    margin-top:  -125px;
    margin-left:  -75px;
}

 

六、水平垂直居中：未知元素高度和宽度的解决方案

居中类型：水平和垂直居中（前提是该元素的宽度和高度未知）

解决方案：设置该元素为绝对定位，并且使用CSS3的transform属性 

HTML

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate nostrum quaerat debitis.
div >

CSS

div {
    background:  #222;
    color:  #fff;
}
/* 以下为居中代码 */
.item {
    position:  absolute;
    top:  50%;
    left:  50%;
    transform:  translate(-50%,-50%);
}

 

七、水平垂直居中：使用flex布局实现

解决方案：设置flex布局，并设置居中元素父元素的justify-content和align-items属性为center

HTML

     div >
div >

CSS

.item {
    width: 100px;
    height: 100px;
    background: # 222;
}
/* 以下为居中代码 */
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
     /* 需要设置height查看垂直居中效果 */
    background: #ccc;
    height: 300px;
}