水平居中和垂直居中

一、水平居中

1、行内元素，对其父元素设置text-align:center

2、块级元素，如果它有固定的宽度，对自身设置margin: 0 auto;

如果没有固定的宽度，借助css3变形属性transform来实现

position:absolute;
left:50%;
transform:translateX(-50%);

二、垂直居中

1、行内元素垂直居中

1）单行文本垂直居中

设置元素的高度height等于元素的行高line-height

2）多行文本的垂直居中

不固定高度的垂直居中：通过设置padding实现
固定高度的多行文本：将display设置为table，配合样式vertical-align：middle实现

.wrap{
    height:200px;
    display:table;
}
.content{
    vertical-align:middle;
    display:table-cell;
    width:200px;
    border:1px solid #ccc;
}

2、块级元素垂直居中

1）元素有固定宽高

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

2）不固定宽高

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

三、基于视口单位的解决方案

基于绝对定位的方案虽然不错，但是对于整个布局影响非常强烈。如果不适用绝对定位，想把元素相对于视口进行居中，可以采用视口长度单位。

<div class="container">
    sdsfsf
</div>

.container {
    width: 200px;
    padding: 20px;
    margin: 50vh auto 0;
    transform: translateY(-50%);
    background: #ccc;
}

四、基于Flexbox的解决方案

Flexbox是目前推荐的最佳解决方案，专门针对这类需求设计，但是浏览器对flexbox的支持程度没有之前方案兼容性高，但是在移动端开发中完全可以使用。

<div class="container">
    sdsfff
</div>

body {
    display: flex;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    background: #d00;
}
			
.container {
    margin: auto;
    background: #ccc;
    padding: 20px;
}

当使用flexbox的时候，样式margin设置为auto不仅在水平方向上居中，在垂直方向上同样居中，如果仅需要单独的垂直居中，需使用align-self设置为center。

水平居中和垂直居中

猜你喜欢