【HLML/CSS学习】元素的水平垂直居中

周兴

已于 2022-11-19 20:36:02 修改

阅读量149

点赞数

分类专栏：前端学习 # HTML/CSS学习文章标签： css html

于 2022-10-30 14:47:56 首次发布

本文链接：https://blog.csdn.net/zx1041561837/article/details/127599251

版权

前端学习同时被 2 个专栏收录

59 篇文章 3 订阅

订阅专栏

HTML/CSS学习

4 篇文章 0 订阅

订阅专栏

1. 水平居中

元素类型	实现水平居中的方式
inline元素	text-align: center
block元素	margin: auto
absolute元素	left: 50% + margin-left: 负值

2. 垂直居中

元素类型	实现垂直居中的方式
inline元素	line-height 的值等于 height 值
absolute元素	top: 50% + margin-top: 负值
absolute元素	left: 50% + top: 50% + transform: translate(-50%, -50%)
absolute元素	top, left, bottom, right = 0, margin: auto

3. 具体实现

3.1 水平居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平对齐</title>
    <style>
        .container{
            border: 1px solid #ccc;
            margin: 10px;
            padding: 10px;
        }
        .item{
            background-color: #ccc;
        }
        /*1. 文字的居中对齐 */
        .container-1{
            text-align: center;
        }
        
        /*2. block元素的水平居中 */
        .container-2 .item{
            width: 500px;
            margin: auto;
        }
        
        /*3. absolute元素的水平居中 */
        .container-3{
            position: relative;
            height: 100px;
        }
        .container-3 .item{
            width: 300px;
            height: 100px;
            position: absolute;
            left: 50%;
            margin-left: -150px;
        }
    </style>
</head>
<body>
    <div class="container container-1">
        <span>一段文字</span>
    </div>
    <div class="container container-2">
        <div class="item">
            this is block item
        </div>
    </div>
    <div class="container container-3">
        <div class="item">
            this is absolute item
        </div>
    </div>
</body>
</html>

效果
在这里插入图片描述

3.2 垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直居中</title>
    <style>
        .container{
            border: 1px solid #ccc;
            margin: 10px;
            padding: 10px;
            height: 100px;
        }
        .item{
            background-color: #ccc;
        }
        /* 1. 将line-height和height设置相同的数值，可以让文字垂直居中 */
        .container-1{
            text-align: center;
            line-height: 100px;
            height: 100px;
        }
        /* 2. 利用top: 50% 和 margin-top: 负值，可以让block元素垂直居中 */
        .container-2{
            position: relative;
        }
        .container-2 .item{
            width: 300px;
            height: 40px;
            position: absolute;
            left: 50%;
            margin-left: -150px;
            top: 50%;
            margin-top: -20px;
        }
        /* 3. transform: translate(-50%, -50%)*/
        .container-3{
            position: relative;
        }
        .container-3 .item{
            width: 200px;
            height: 40px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        /* 4. top: 0;right: 0;bottom: 0; left: 0;margin: auto*/
        .container-4{
            position: relative;
        }
        .container-4 .item{
            width: 100px;
            height: 40px;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0; 
            left: 0;
            margin: auto
        }
    </style>
</head>
<body>
    <div class="container container-1">
        <span>一段文字</span>
    </div>

    <div class="container container-2">
        <div class="item">
            this is item
        </div>
    </div>

    <div class="container container-3">
        <div class="item">
            this is item
        </div>
    </div>

    <div class="container container-4">
        <div class="item">
            this is item
        </div>
    </div>

</body>
</html>

效果
在这里插入图片描述

3.2 使用flex布局

html

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

css

.box {
    width: 50px;
    height: 50px;
    background-color: #fff
}

.container {
    width: 150px;
    height: 150px;
    background-color: #000;
    display: flex;              // 开启flex布局
    justify-content: center;    // 水平居中
    align-items: center;		// 垂直居中
}

效果
在这里插入图片描述

3.3 绝对定位 + margin: auto

.container {
    width: 150px;
    height: 150px;
    background-color: #000;
    position: relative;
}

.box {
    width: 50px;
    height: 50px;
    background-color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}