首页 > 代码库 > CSS垂直水平居中方法总结

CSS垂直水平居中方法总结

2024-08-17 12:01:59   221人阅读

在布局的时候经常能用到居中，在此总结一下

html结构：

<div class="wrap">
    <div class="content"></div>
</div>

1.水平居中：margin:auto; 

.wrap{
    width: 400px;
    height: 400px;
    background-color: lightblue;
}
.content{
    width: 200px;
    height: 200px;
    background-color: lightcoral;
    /*margin:auto只能水平居中*/
        margin: auto;
}

此方法简单只需一行代码，但是只能水平居中，至于为什么垂直居中不起作用呢：默认宽度继承父级宽度,而高度不能继承可以由内容撑开，居中计算时是相对父级计算因此垂直居中不起作用

效果如下：

技术分享

2.垂直居中：table-cell

.wrap{
   width: 400px;
   height: 400px;
   background-color: lightblue;
   /* 将父元素的display设置为table-cell*/
   display: table-cell;                
   vertical-align: middle;
}
.content{
   width: 200px;
   height: 200px;
   background-color: lightcoral;
}

这里要强调一点就是display:table-cell是对父元素设置的，在表格单元中，vertical-align属性会设置单元格框中的单元格内容的对齐方式。这里设置为middle居中对齐，有兴趣的小伙伴也可以试试其他值如：top,bottom等。

效果如下：

技术分享

3.一个水平居中，一个垂直居中放在一起是不是就可以垂直水平居中了

.wrap{
    width: 400px;
    height: 400px;
    background-color: lightblue;
    display: table-cell;
    vertical-align: middle;
}
.content{
    width: 200px;
    height: 200px;
    background-color: lightcoral;
    margin: auto;
}

效果图：

技术分享bingo就是这么完美 

4.绝对定位（高度未知）

.wrap{
    width: 400px;
    height: 400px;
    background-color: lightblue;
    /*父元素相对定位*/
    position: relative;
}
.content{
    width: 200px;
    height: 200px;
    background-color: lightcoral;
    /*子元素绝对定位*/
    position: absolute;
    /*子元素分别相对top,left偏移50%*/
    top:50%;
    left: 50%;
    /*子元素相对自身top,left分别移动-50%*/
    transform: translate(-50%,-50%);
}

效果图：

技术分享

上面两种方法优点在于可以在高度未知的情况下使用，下面这种方法就要知道子元素高度

5.绝对定位 调整负margin值

.wrap{
    width: 400px;
    height: 400px;
    background-color: lightblue;
    /*父元素相对定位*/
    position: relative;
}
.content{
    width: 200px;
    height: 200px;
    background-color: lightcoral;
    /*子元素绝对定位*/
    position: absolute;
    /*子元素分别相对top,left偏移50%*/
    top:50%;
    left: 50%;
    /*子元素相对自身top,left分别移动负100像素*/
   margin-top:-100px;
   margin-left:-100px;
}

效果图与上面一种方法一样就不在放了。

6.弹性盒模型：display:flex;

.wrap{
    width: 400px;
    height: 400px;
    background-color: lightblue;
    display:flex;
}
.content{
    width: 200px;
    height: 200px;
    background-color: lightcoral;
   margin:auto;
}

flex兼容性问题可参考下图：

技术分享

7.单行文本居中:line-height

html结构：

<div class="content">一切都是最好的安排</div>

css样式：

.content{
    width: 200px;
    height: 200px;
    background-color: lightcoral;
    line-height: 200px;
}

效果图：

技术分享

8.多行文本就不能用line-height了，还可以用上面table-cell方法来使多行文本居中

.content{
    width: 200px;
    height: 200px;
    background-color: lightcoral;
    display:table-cell;
    vertical-align:middle; 
}

可以直接在div(.content)中输入文本或者文本输入在一个标签里

CSS垂直水平居中方法总结


联系
我们