CSS水平垂直居中的几种实现方式

01xm

已于 2022-07-15 13:03:26 修改

阅读量980

点赞数 1

分类专栏： css 文章标签： css

于 2022-04-24 17:00:25 首次发布

本文链接：https://blog.csdn.net/Bon_nenul/article/details/124385573

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细介绍了五种在CSS中实现元素水平垂直居中的方法，包括使用`position:absolute`配合`margin`或`transform`，利用`margin:auto`，使用弹性盒子以及结合文本对齐和行高。这些技巧涵盖了不同场景下的居中需求，适用于静态布局和响应式设计。

摘要由CSDN通过智能技术生成

水平垂直居中

1.利用 `position:absolute`

<div class="father">
     <div class="son"></div>
</div>

当已知元素宽度和高度时，可以设置position: absolute和margin为负的宽高的一半

<style>
    .father{
        position: relative;
        background-color: pink;
        width: 200px;
        height: 200px;
    }
    .son{
        position: absolute;
        background-color: red;
        width:50px;
        height: 50px;
        left: 50%;
        top: 50%;
        margin-top: -25px;
        margin-left: -25px;
    }
</style>

当元素宽度和高度未知时，可以设置position: absolute和transform: translate(-50%, -50%)

.father{
        position: relative;
        background-color: pink;
        width: 200px;
        height: 200px;
    }
    .son{
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: red;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }

2. 利用`margin:auto`

.father{
        position: relative;
        background-color: pink;
        width: 200px;
        height: 200px;
    }
    .son{
        position: absolute;
        background-color: red;
        width: 50px;
        height: 50px;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }

3. 利用弹性盒子

通过给父元素设置display:flex来实现居中

.father{
        display: flex;
        justify-content: center; //主轴
        align-items: center; //侧轴
        background-color: pink;
        width: 200px;
        height: 200px;
    }
    .son{
        background-color: red;
        width: 50px;
        height: 50px;
    }

在这里插入图片描述

4. 利用水平对齐和行高

设置text-align:center和line-height:height实现单行文本水平垂直居中

<div class="father">
     <div class="son">我要居中</div>
</div>

	.father{
	        background-color: pink;
	        width: 200px;
	        height: 200px;
	        text-align: center;
	}
	.son{
	    line-height: 200px;
	}

在这里插入图片描述

5. 最简便的方法

flex+auto
父元素设置flex 子元素margin：auto；

<style>
    .g-container{
        display: flex;
        width: 300px;
        height: 300px;
        background-color:aqua;
    }
    .g-box{
        margin: auto;
        width: 100px;
        height: 100px;
        background-color: black;
    }
</style>
<body>
    <div class="g-container">
        <div class="g-box"></div>
    </div>
</body>

在这里插入图片描述

01xm

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
CSS水平垂直居中的几种实现方式

水平垂直居中1.利用 `position:absolute`2. 利用`margin:auto`3. 利用弹性盒子4. 利用水平对齐和行高1.利用 position:absolute<div class="father"> <div class="son"></div></div>当已知元素宽度和高度时，可以设置position: absolute和margin为负的宽高的一半<style> .father{
复制链接

扫一扫