CSS实现元素水平垂直居中

时间：2021-05-01 11:48:13

我们知道，实现元素的水平居中比较简单，在设置了宽度后，设置左右margin为auto就可以。 但是如何设置元素垂直居中呢？ 当然，对于单行的文字，可以通过设置line-height来解决， 可以对于一个块状元素来说，就没有那么简单。下面我们总结了一些实现 元素垂直水平都对齐的几种方式。

一、定位+负边距

html部分

<body>
    <div class="box"></div>
</body>

css部分

.box{
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-150px;
    margin-top:-100px;
    padding:20px;
    width:300px;
    height:200px;
    background:#41D7FB;
}

特点

  • 兼容性较好，能够兼容到IE6
  • 元素的宽高需要固定
  • 比较经典的垂直居中实现方式

二、定位+自适应边距

html部分

<body>
    <div class="box"></div>
</body>

css部分

.box{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    padding:20px;
    width:300px;
    height:200px;
    background:#41D7FB;
}

特点

  • 兼容IE8以及以上浏览器
  • 元素宽高不需固定，可以随内容适应

三、定位+CSS3位移

html部分

<body>
    <div class="box"></div>
</body>

css部分

.box{
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    padding:20px;
    width:300px;
    height:200px;
    background:#41D7FB;
}

特点

  • 由于使用了CSS3中的transform属性，需要IE9+浏览器
  • 元素宽高不需固定，可以随内容适应

四、Flex布局实现

html部分

<body>
    <div class="box"></div>
</body>

css部分

html{
    display: flex;
    height: 100%;
    justify-content: center;
    align-items:center;
}
.box{
    padding:20px;
    width:300px;
    height:200px;
    background:#41D7FB;
}

特点

  • 简单直接
  • 兼容性较差，需要IE10+
  • 父元素高度需要指定
  • 元素的宽高可以随内容适应

五、table-cell配合inline-block

html部分

<body>
    <div class="table">
    <div class="table-row">
        <div class="table-cell">
        <div class="box"></div>
        </div>
    </div>
    </div>  
</body>

css部分

.table{
    display:table;
    width:100%;
    height:600px;
}
.table-row{
    display: table-row;
}
.table-cell{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.box{
    display: inline-block;
    padding:20px;
    width:300px;
    height:200px;
    background:#41D7FB;
}

特点

  • 需IE8+兼容
  • 元素宽高可以随内容适应
  • 需设置较多的标签和css样式

相关文章