三种水平居中布局~详细

最新推荐文章于 2023-11-14 10:57:12 发布

weixin_46370867

最新推荐文章于 2023-11-14 10:57:12 发布

阅读量283

点赞数

分类专栏： CSS html

本文链接：https://blog.csdn.net/weixin_46370867/article/details/109168520

版权

html 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

第一种水平居中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一种实现水平居中</title>
    <style>
        .parent {
            width: 100%;
            height: 200px;
            background-color: darksalmon;
            /* 
            text-align属性：设置文本内容的对齐方式
            对 inline-block元素也有效
             */
            text-align: center; /* 设置child元素水平居中，同时 child中的文本内容水平居中*/


            /* 使用text-align: center; 使元素水平居中的缺点：
                1.自己元素的文本内容同时也会居中对齐
                2.为了实现子级元素的水平居中, 为父级元素设置额外的样式属性
             */
        }

        .child {
            width: 200px;
            height: 200px;
            background-color: darkkhaki;
            /* 第一步：
               将实现水平方向水平居中效果的元素设置为inline-block


                原因：1.多个inline-block元素之间水平排列
                      2.inline-bloack元素可以设置width 和 height属性
                      3.inline-block元素具备inline元素的特性

             */
            display: inline-block;

            
            /* 为了解决父级元素的text-align: center; 使子级元素的文本内容水平居中的问题
               在子级元素里面 重新设置text-align属性的值
             */
            text-align: left;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">居中1</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>第二种实现水平居中</title>
    <style>
        .parent {
            width: 100%;
            height: 200px;
            background-color: darksalmon;
 
        }

        /* 为子级元素设置水平居中 */
        /* 
        方法2：
            1.为子级元素设置width属性 （定宽）
            2.使用margin属性实现水平居中
         */

         /* 
         方法2的缺点：
           如果当前元素脱离了文档流，margin属性失效；
           margin属性不能为脱离了文档流的元素社子和水平居中
   
          */
        .child {
            width: 200px;
            height: 200px;
            background-color: darkkhaki;

            margin: 0 auto;
        }

        
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">居中2</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>第三种实现水平居中</title>
    <style>
        .parent {
            width: 100%;
            height: 200px;
            background-color: darksalmon;

            position: relative; /* 为了使子级元素相对于父级元素进行定位*/
        }

        /* 为子级元素设置水平居中 */
        .child {
            width: 200px;
            height: 200px;
            background-color: darkkhaki;

            position: absolute;

            left: 50%; /* 子级元素左上角的点 在父级元素的中间*/

            /* 使子级元素向左移动,使子级元素在父级元素里水平居中*/
            margin-left: -100px; /*100是父级元素的一半*/
            /* margin-left: -50% 50%指的是父级元素宽度的50%     但是此语句无效无效 */

            /* 缺点：使用margin-left属性：导致耦合度升高 （值是父级元素宽度的一半）*/
        }
    </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>第三种实现水平居中</title>
    <style>
        .parent {
            width: 100%;
            height: 200px;
            background-color: darksalmon;

            position: relative; /* 为了使子级元素相对于父级元素进行定位*/
        }

        /* 为子级元素设置水平居中 */
        .child {
            width: 200px;
            height: 200px;
            background-color: darkkhaki;

            position: absolute;

            left: 50%; /* 子级元素左上角的点 在父级元素的中间*/

            /* translateX() 函数的50%指的是父级元素宽度的50% */
            transform: translateX(-50%);
        }

        /* 
            方法3：
            1.将子级元素设置为绝对定位（父级元素设置为相对定位）
            2.left设置为50% 和 translateX()设置为-50%实现水平居中
         */

         /* 
         缺点：
         1。为了实现子级元素的水平居中，在父级元素中设置了额外属性position: relative;
         2. translateX()函数 是CSS3的新增属性 浏览器兼容问题
          */
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">居中3</div>
    </div>
</body>
</html>