水平居中、垂直居中

最新推荐文章于 2024-03-13 10:55:47 发布

Jiuto_crx

最新推荐文章于 2024-03-13 10:55:47 发布

阅读量134

点赞数

文章标签： css

本文链接：https://blog.youkuaiyun.com/Jiuto_crx/article/details/115178711

版权

本文详细介绍了在HTML/CSS中如何实现水平居中和垂直居中的各种方法，包括行内元素和块级元素。针对块级元素，提供了margin、flex、position+transform和position+margin等解决方案；对于行内元素，讨论了line-height、table-cell、伪元素+content等方法。这些技巧涵盖了传统和现代布局技术，适用于不同的场景需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

水平居中、垂直居中

<div class="center_block parent">
    <div class="block">块级元素div</div>
</div>
<div class="center_inline parent">
    <span>行内元素span</span>
</div>
<div class="middle_block parent">
    <div class="block">块级元素div</div>
</div>
<div class="middle_inline parent">
    <span>行内元素span</span>
</div>

.parent {
    width: 500px;
    height: 100px;
    background-color: gray;
    border: 1px solid black;
    margin: 10px;
    padding: 20px;
    color: white;
}
.block {
    width: 200px;
    height: 30px;
    background-color: burlywood;
}

原始效果：

在这里插入图片描述

居中效果：

在这里插入图片描述

水平居中+行内元素

方法一

.center_inline {
    text-align: center;
}

水平居中+块级元素

方法一：margin

.center_block .block {
    margin: 0 auto;
}

方法二：flex

.center_block {
    display: flex;
    justify-content: center;
}

方法三：position + transform

.center_block {
    position: relative;
}
.center_block .block {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

方法四：position + margin

.center_block {
    position: relative;
}
.center_block .block {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

垂直居中+行内元素

方法一：line-height

.middle_inline span {
    line-height: 100px;
}

方法二：table-cell + vertical-align

/* 这种方案margin会失效 */
.middle_inline { 
    display: table-cell;
    vertical-align: middle;
}

/* 使用这种，但是宽度会撑满*/
.middle_inline { 
    display: table;
}
.middle_inline span {
    display: table-cell;
    vertical-align: middle;
}

在这里插入图片描述

垂直居中+块级元素

方法一：flex

.middle_block {
    display: flex;
    align-items: center;
}

方法二：position + transform

.middle_block {
    position: relative;
}
.middle_block .block {
    position: absolute;
    top: 50%;
    transform: translate( 0, -50%);
}

方法三：position + margin

.middle_block {
    position: relative;
}
.middle_block .block {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

方法四：table-cell + vertical-align

/* 这种方案margin会失效 */
.middle_block {
    display: table-cell;
    vertical-align: middle;
}

/* 使用这种，但是高度会撑满*/
.middle_block { 
    display: table;
}
.middle_block .block {
    display: table-cell;
    vertical-align: middle;
}

在这里插入图片描述

方法五：伪元素 + content

.middle_block::before {
    content: '';
    height: 100%;
    display: inline-block;
    vertical-align: middle;  
}
.middle_block .block {
    display: inline-block;
    vertical-align: middle;
}