HTML水平垂直居中的四种方式

最新推荐文章于 2023-09-18 15:02:14 发布

Delete.Q

最新推荐文章于 2023-09-18 15:02:14 发布

阅读量4.1k

点赞数 8

分类专栏： web前端文章标签： html flex html5 css3 css

本文链接：https://blog.csdn.net/weixin_44961514/article/details/119728112

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

第一种方式是使用margin进行移动

水平居中 margin:0 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>水平垂直居中</title>
    <style>
        /* 设置父容器样式和高度 */
        .container{
            width: 400px;
            height: 400px;
            border: 5px solid black;
        }
        /* 子元素的样式 */
        .container>div{
            width: 200px;
            height: 200px;
            background-color: blue;
            /* 水平居中 */
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <!-- 父容器 -->
    <div class="container">
        <!-- 子元素 -->
        <div></div>
    </div>
</body>
</html>

要设置垂直居中的话，就要根据父元素的高度和子元素的高度进行计算，也就是父元素的高度的一半再减去子元素的高度的一半

/* 子元素的样式 */
        .container>div{
            width: 200px;
            height: 200px;
            background-color: blue;
            /* 水平垂直居中 */
            margin: 100px auto;
        }

水平垂直居中

第二种方式就是使用flex布局，让父容器设置为display：flex；设置主轴方向justify-content:center

交叉轴为align-items:center

 <style>
        /* 设置父容器样式和高度 */
        .container{
            width: 400px;
            height: 400px;
            border: 5px solid black;
            /* 父元素开启flex布局 */
            display: flex;
            /* 主轴方向上居中 */
            justify-content: center;
            /* 交叉轴方向上居中  */
            align-items: center;
        }
        /* 子元素的样式 */
        .container>div{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>

第三种方式使用绝对定位和相对，给父容器设置为相对相位position: relative;

水平居中：先子元素设置绝对定位 position: absolute; 设置绝对定位元素的left:50%; 然后再设置绝对定位元素的 margin-left: -元素宽度的一半px; margin-left：-100px

垂直居中：就要根据父元素的高度和子元素的高度进行计算，也就是父元素的高度的一半再减去子元素的高度的一半

<style>
        /* 设置父容器样式和高度 */
        .container{
            width: 400px;
            height: 400px;
            border: 5px solid black;
            /* 父容器相对定位 */
            position: relative;
        }
        /* 子元素的样式 */
        .container>div{
            /* 子元素绝对定位 */
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: blue;
            /* 设置绝对定位元素的left:50%; */
            left: 50%;
            /* 设置子元素左外边距 */
            margin-left: -100px;
            /* 再根据父容器和子元素的高度算出垂直居中的高度 */
            margin-top: 100px;
        }
    </style>

还有一种水平垂直居中的方式也是使用绝对定位和相对定位，也是给父容器设置相对定位，子元素设置绝对定位，然后让绝对定位的元素的上下左右都为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>水平垂直居中</title>
    <style>
        /* 设置父容器样式和高度 */
        .container{
            width: 400px;
            height: 400px;
            border: 5px solid black;
            /* 父容器相对定位 */
            position: relative;
        }
        /* 子元素的样式 */
        .container>div{
            /* 子元素绝对定位 */
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: blue;
            margin: auto;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <!-- 父容器 -->
    <div class="container">
        <!-- 子元素 -->
        <div></div>
    </div>
</body>
</html>

Delete.Q

关注

8
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
HTML水平垂直居中的四种方式

第一种方式是使用margin进行移动水平居中 margin:0 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, i
复制链接

扫一扫