CSS3使盒子垂直水平居中的3种办法

web大白

已于 2023-05-17 11:41:00 修改

阅读量1.9k

点赞数 1

文章标签： javascript css3 css

于 2021-12-01 15:38:18 首次发布

本文链接：https://blog.csdn.net/aaaaadddad/article/details/121656257

版权

本文介绍了三种在HTML和CSS中实现元素居中的方法：1. 使用定位和transform；2. 弹性盒子布局；3. 绝对定位结合margin:auto。详细展示了每种方法的代码实现，帮助读者理解不同布局策略在页面居中对齐上的应用。

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

盒子居中也是我们代码功能实现的很重要的一个部分，下面来介绍一下三种解决办法

1.定位的盒子垂直水平居中，使用margin或者transform移动盒子

2.弹性盒子布局，使用主轴和副轴的对齐方式使盒子居中

3.绝对定位，上下左右都为0，使用margin:auto实现盒子居中

第一种方式：

<!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>Document</title>
    <style>
        .father {
            position: relative;            /* 父相 */
            width: 400px;
            height: 300px;
            border: 1px solid red;
            margin: 100px auto;
        }
        
        .son {
            position: absolute;            /* 子绝 */
            top: 50%;
            left: 50%;
            /* 第一种 */
            /* margin-top: -50px; */
            /* margin-left: -50px; */

            /* 第二种 */
            transform: translateX(-50px) translateY(-50px);
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
</head>

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

</html>

父元素采用了相对定位，子元素采用了绝对定位，并使用了两种方式实现垂直和水平居中。

第二种方式：

<!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>Document</title>
    <style>
        .father {
            width: 400px;
            height: 300px;
            border: 1px solid red;
            margin: 100px auto;
            /* 使用弹性盒子解决 */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .son {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
</head>

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

</html>

父元素采用了弹性盒子的方式去解决子元素的居中问题。使用了

display: flex;

justify-content: center;

align-items: center;

属性来实现垂直和水平居中。可以帮助理解HTML和CSS的弹性盒子布局的基本知识

第三种方式：

<!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>Document</title>
    <style>
        .box {
            /* 使用绝对定位 */
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            /* margin: auto;上下左右居中 */
            margin: auto;
            /* 写宽、高度才能居中 */
            width: 200px;
            height: 200px;
            padding: 50px;
            border: 1px solid red;
        }
    </style>
</head>

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

</html>

采用了绝对定位和 margin: auto 属性来实现元素的水平和垂直居中。通过设置

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

属性使元素占满整个父容器，然后使用margin: auto;来水平和垂直居中元素。另外，必须设置元素的宽和高，才能使用margin: auto;属性来居中元素。可以帮助理解HTML和CSS如何使用绝对定位和margin: auto属性居中元素。

web大白

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS3使盒子垂直水平居中的3种办法

盒子居中也是我们代码功能实现的很重要的一个部分，下面来介绍一下三种解决办法1.定位的盒子垂直水平居中，使用margin或者transform移动盒子2.弹性盒子布局，使用主轴和副轴的对齐方式使盒子居中3.绝对定位，上下左右都为0，使用margin:auto实现盒子居中第一种方式：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <m
复制链接

扫一扫