全面掌握主流CSS布局（水平居中+垂直居中+居中布局）

最新推荐文章于 2024-03-12 18:19:00 发布

NolanKy

最新推荐文章于 2024-03-12 18:19:00 发布

阅读量1k

点赞数 3

分类专栏：前端文章标签： html css css3 sass less

本文链接：https://blog.csdn.net/weixin_45644335/article/details/109174063

版权

前端专栏收录该内容

61 篇文章 3 订阅

订阅专栏

一，水平居中布局

1、行内元素水平居中

父级元素设置text-align: center ——>实现在块级元素内部的行内元素（inline/inline-block/inline-flex/inline-table）水平居中

<div class="parent">
    <div class="child">dome</div>
</div>
<style>
    .parent{
        text-align: center;
    }
    .child{
        display: inline-block;
    }
</style>

2、块级元素的水平居中

（1）、设置左右外边距为auto，margin：0 auto;

.child{
    width: 100px;   //确保该块级元素定宽
    margin: 0 auto;
}

（2）、使用table+margin，即子元素设置为块级表格来表示，在设置水平居中

.child{
    display: table;
    margin: 0 auto;
}

（3）、使用absolute+transform

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent {
            width: 100%;
            height: 300px;
            background-color: aqua;
            position: relative;
        }

        .child {
            width: 200px;
            height: 300px;
            background-color: burlywood;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child"></div>
    </div>

</body>

</html>

二，垂直居中布局的实现

1，单行文本垂直居中

对于单行文本，我们只需要将文本行高(line-height)和所在区域高度(height)设为一致即可：

<!--html代码-->
    <div id="div1">
        这是单行文本垂直居中
    </div>

/*css代码*/
        #div1{
            width: 300px;
            height: 100px;
            margin: 50px auto;
            border: 1px solid red;
            line-height: 100px; /*设置line-height与父级元素的height相等*/
            text-align: center; /*设置文本水平居中*/
            overflow: hidden; /*防止内容超出容器或者产生自动换行*/
        }

2，
display: table-cell;
vertical-align: middle;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent {
            width: 200px;
            height: 600px;
            background-color: aqua;
            display: table-cell;
            vertical-align: middle;


        }

        .child {
            width: 200px;
            height: 100px;
            background-color: burlywood;

        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child"></div>
    </div>

</body>

</html>

position: absolute;
top: 50%;
transform: translateY(-50%);

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent {
            width: 200px;
            height: 600px;
            background-color: aqua;
            position: relative;


        }

        .child {
            width: 200px;
            height: 100px;
            background-color: burlywood;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);

        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child"></div>
    </div>

</body>

</html>

三，居中布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent {
            width: 1000px;
            height: 600px;
            background-color: aqua;
            display: table-cell;
            vertical-align: middle;

        }

        .child {
            width: 200px;
            height: 100px;
            background-color: burlywood;
            display: table;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child"></div>
    </div>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent {
            width: 1000px;
            height: 600px;
            background-color: aqua;
            position: relative;
        }

        .child {
            width: 200px;
            height: 100px;
            background-color: burlywood;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child"></div>
    </div>

</body>

</html>

NolanKy

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
全面掌握主流CSS布局（水平居中+垂直居中+居中布局）

一，水平居中布局1、行内元素水平居中父级元素设置text-align: center ——>实现在块级元素内部的行内元素（inline/inline-block/inline-flex/inline-table）水平居中<div class="parent"> <div class="child">dome</div></div><style> .parent{ text-align: center
复制链接

扫一扫