div盒子水平垂直居中的几种方式

最新推荐文章于 2022-09-25 12:37:10 发布

W123&

最新推荐文章于 2022-09-25 12:37:10 发布

阅读量3.3k

点赞数 1

分类专栏： web前端文章标签： css javascript html

本文链接：https://blog.csdn.net/weixin_45954770/article/details/126953992

版权

web前端专栏收录该内容

3 篇文章 1 订阅

订阅专栏

1. div水平居中

div{
	width:100px;
    height:100px;
    margin:0 auto;
}

2. div水平垂直居中

这里要有两层或者给body设置高度100vh，然后给元素设置绝对定位，并且left、right、top、bottom全为0，margin:auto就能实现div水平垂直居中了

<!-- <div class="out">
    <div class="box">test</div>

</div> -->
<div class="box">test</div>



  <style>
        *{
            margin: 0;
            padding: 0;

        }
        body{
            height:100vh;
        }
         .box{
            border:1px solid red;
            height: 80px;
            width:80px;
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            top: 0;
            margin:auto;
        }   
    </style>

3. 使用table-cell实现div水平垂直居中

table-cell：块级表格元素

将父盒子设置为table-cell元素，可以使用text-align:center和vertical-align:middle实现水平、垂直居中。
子元素设置为inline-block

<!DOCTYPE html>
<html lang='cn'>
<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>
        *{
            margin: 0;
            padding: 0;

        }
        .out{
            display:table-cell;
            text-align: center;
            vertical-align: middle;
            width:100vw;
            height:100vh;
        }
         .box{
            border:1px solid red;
            height: 80px;
            width:80px;
           	display: inline-block;
        }   
    </style>
</head>
<body>

    <div class="out">
        <div class="box">test</div>
    </div>
</body>
<script>
    
</script>
</html>

4. 使用弹性布局

使用弹性布局居中要给父元素加上高度才会垂直居中

<!DOCTYPE html>
<html lang='cn'>
<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>
        *{
            padding: 0;
            margin: 0;
        }
        .out{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .test{
            width: 100px;
            height:100px;
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div class="out">
        <div class="test">test</div>
    </div>
</body>
<script>
    
</script>
</html>

5. 子绝父相定位居中

left、top各50%，margin-left、margin-top是宽高的一半并且使用负数

<!DOCTYPE html>
<html lang='cn'>
<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>
        *{
            padding: 0;
            margin: 0;
        }
        .out{
           position:relative;
            height: 100vh;
        }
        .test{
            width: 100px;
            height:100px;
            position:absolute;
            top:50%;
            left:50%;
            margin-left:-50px;
            margin-top:-50px;
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div class="out">
        <div class="test">test</div>
    </div>
</body>
<script>
    
</script>
</html>

W123&

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
div盒子水平垂直居中的几种方式

这里要有两层或者给body设置高度100vh，然后给元素设置绝对定位，并且left、right、top、bottom全为0，margin:auto就能实现div水平垂直居中了。将父盒子设置为table-cell元素，可以使用text-align:center和vertical-align:middle实现水平、垂直居中。left、top各50%，margin-left、margin-top是宽高的一半并且使用负数。使用弹性布局居中要给父元素加上高度才会垂直居中。子元素设置为inline-block。
复制链接

扫一扫

专栏目录