css 居中问题

1、居中元素不定高

    在需要居中目标的高度不定动态变化的时候,这个时候个人一般会用table标签,但是如果居中目标数量很少的话需要人为营造一个table。即 demo1>div>目标 需要包裹三层,利用table的属性vertical-align属性让其竖直居中

.demo1{
	display: table;
}
.demo1>div{
	display: table-cell;
	vertical-align: middle;
}

类似于 table>tbody>tr>td 中的元素能够自动垂直居中

2、居中元素为文本

    对于纯文字的居中,只需把文字的行高调至容器高度

div{
   height:30px;
   line-height:30px;
}

3、居中元素定高

这个方法多用于弹窗的居中,想要居中于父元素,需要给父元素一个relative

.wrap {
    position: relative;
}
.center {
    width: 100px;
    height: 100px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

4、手机端垂直居中

.wrap {
    position: relative;
   }
.center {
    position: absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    width: 100px;
    height: 100px;
}

5css3弹性盒子居中法,给父元素一个displayflex

.wrap {
    position: relative;
   }
.center {
    position: absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    width: 100px;
    height: 100px;
} 

也可以直接父元素 displayflex 子元素 marginauto 

.wrap {
    width: 200px;
    height: 200px;
    display: flex; 
    align-items: center; 
    justify-content: center;
}
.center {
}

附上一个写的很好的demo大家可以参考下 http://douglasheriot.com/tutorials/css_vertical_centre/demo4.html

还有一种行内元素的居中这里有一篇写的很好http://yincheng.site/css-align

原文链接 http://www.hotmaycold.com/2017/03/07/css-居中问题/ 

1 thought on “css 居中问题

  1. 为冰雪画家的wordpress主题不知道有没有什么好的想法,有的话请联系我。
    邮箱:elisadotoa@aliyun.com 墨翔太 收
    期待您的建议

发表评论

电子邮件地址不会被公开。 必填项已用*标注