关于html水平垂直居中方法总结

三寸日光呼

已于 2022-12-24 21:52:45 修改

阅读量158

点赞数

文章标签： html css3 css

于 2021-12-19 21:29:56 首次发布

本文链接：https://blog.csdn.net/libocsdn_lean/article/details/122030314

版权

所有的实现方式公共样式

         .box{
             width: 300px;
             height: 300px;
             margin: 20px auto;
             border: solid
         }
         .min{
             width: 100px;
             height: 100px;
             background-color: greenyellow;
         }

弹性盒 flex实现

         .item1{
             display: flex;
             justify-content: center;
             align-items: center;
         }
         
    <div class="box item1">
        <div class="min"></div>
    </div>

List item

  算了，还是直接把全部代码粘贴过来把~

代码块如下，flex + grid + margin + position + vertical-align 实现水平垂直居中效果~

<!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{
             width: 300px;
             height: 300px;
             margin: 20px auto;
             border: solid
         }
         .min{
             width: 100px;
             height: 100px;
             background-color: greenyellow;
         }
         /* 弹性盒布局  */
         .item1{
             display: flex;
             justify-content: center;
             align-items: center;
         }
         /*  定位 */
         .item2{
             position: relative;
         }
         .item2>div{
             position: absolute;
             left: 0px;right: 0px;bottom: 0px;top: 0px;
             margin: auto;
         }
         /* margin 需要知道父元素的尺寸 */
         .item3>div{
           transform: translateX(calc(150px - 50%) )  translateY(calc(150px - 50%));
         }
         /* gird */
         .item4{
             display: grid;
             justify-items: center;
             align-items: center;
         }

         /* vertical-align */
         .item5{
             text-align: center;
         }
         .item5::after{
            content: '';
            display: inline-block;
            height: 100%;
            width: 1px;
            vertical-align: middle;
         }
         .item5>div{
            display: inline-block;
            vertical-align: middle;
         }
    </style>
</head>
<body>
    <!-- 弹性盒布局 -->
    <div class="box item1">
        <div class="min"></div>
    </div>
    <!-- 定位 -->
    <div class="box item2">
        <div class="min"></div>
    </div>
      <!-- margin  translateX-->
    <div class="box item3">
        <div class="min"></div>
    </div>
       <!-- grid -->
    <div class="box item4">
        <div class="min"></div>
    </div>
    <!-- vertical-align -->
    <div class="box item5">
        <div class="min"></div>

    </div>
</body>
</html>