【CSS】水平居中与垂直居中

CSS居中布局技巧

最新推荐文章于 2018-11-30 12:19:31 发布

weixin_34221332

最新推荐文章于 2018-11-30 12:19:31 发布

阅读量57

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lijie33402/p/4596006.html

有宽度的div水平居中

1.左右margin设为auto即可
.center {
width: 960px;
margin-left: auto;
margin-right: auto;
}

2.绝对定位
.ele {
position: absolute;
width: 宽度值;
left: 50%;
margin-left: -(宽度值/2);
}

没有定义宽度的div水平居中

1.父容器text-align:center 子容器为display：inline-block
.container{
width: 500px;
margin: 0 auto;
text-align:center;
background:red;
}
.center{
display:inline-block;
}

有高度的div垂直居中

1.绝对定位 margin:auto

.content {
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    margin:auto; 
    height:240px; 
    width:70%; 
}

2.绝对定位同水平居中

.ele {
    position: absolute;
    width: 高度值;
    left: 50%;
    margin-left: -(高度值/2);
}

3.文字的垂直居中的很简单了就是line-height就可以了

4.行内元素如img的垂直居中

    <p class="sditem1">适配所有主流机型的APP<img src="images/电工.png"></img></p>
    .sdTxtWrap img{
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    }

这样图片的基准线就会对齐文本的中线，一定要记住vertical-align只能用于行内元素与table-cell！！

没定义高度的div垂直居中

1.使用表格的 vertical-align property 属性。

    <div class="wrapper">  
    <div class="cell">
        <div class="content"> Content goes here</div>
    </div>
</div>  

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

转载于:https://www.cnblogs.com/lijie33402/p/4596006.html