居中

最新推荐文章于 2023-07-19 16:21:47 发布

Muqiu7890

最新推荐文章于 2023-07-19 16:21:47 发布

阅读量127

点赞数

分类专栏： css 日常总结

本文链接：https://blog.csdn.net/qj6837/article/details/99970179

版权

日常总结同时被 2 个专栏收录

51 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

1水平居中

行内元素
text-align: center;
块级元素
2.1 定宽
```
  margin: 0 auto
```
2.2 不定宽

将子元素改为行内元素display: inline; 在给父元素使用text-align: center;

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>水平居中</title>
    </head>
    <style>
        /*块级元素 水平居中*/
        /*
         1.2 子元素不定宽
        */
        /*1.2.1 absolute+transform 子元素先相对父元素右移一半 在相对自己左移一半
         (也可通过在子元素上设置margin： 0 auto;left: 0;right: 0;) */
        .parent {
            position: relative;
        }
        .child {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
        /*1.2.2 flex+justify-content  定义项目在主轴上的对其方式 */
        .parent {
            display: flex;
            justify-content: center;
        }
        /*1.2.3 table+margin 子元素宽度即为内容宽*/
        .parent {
            width: 100%;
            height: 200px;
            background: #A3C5A8;
        }
        .child {
            display: table;
            margin: 0 auto;
            background: antiquewhite;
        }
        /* 1.2.4 flex+margin*/
        .parent {
            display: flex;
        }
        .child {
            margin: 0 auto;
        }
     
        /* 2 多级块级元素--水平居中 */
        /*
          2.1 同1.2.3
        .parent {
            display: flex;
            justify-content: center;
            background: #A3C5A8;
        }
        .child {
            background: antiquewhite;
            width: 200px;
            height: 200px;
            margin: 5px;
        }
        */
        /*
          2.2 display: inline-block 相当于给行内元素居中
        .parent {
            text-align: center;
            background: #A3C5A8;
        }
        .child {
            display: inline-block;
            background: antiquewhite;
            width: 200px;
            height: 200px;
            margin: 5px;
        }
        */
        
        */
        /*
         3.3 无论是否定宽（最好的办法） flex
         */
        .parent {
            display: flex;
            justify-content: center;
        }
        .child {
            float: left;
        }
    </style>
    <body>
    <!--实现行内元素水平居中，可以通过在其父元素上设置text-align: center-->
    
    <!--块级元素 水平居中-->
    <!--
    <div class="parent">
        <div class="child">
            块级元素--水平居中
        </div>
    </div>
    -->
    
    <!--多级块级元素 水平居中-->
    <!--
    <div class="parent">
        <div class="child">多级块级元素--水平居中</div>
        <div class="child">多级块级元素--水平居中</div>
        <div class="child">多级块级元素--水平居中</div>
    </div>
    -->
    
    <!--定宽的浮动元素 水平居中-->
    <!--
    <div class="parent">
        <div class="child" style="float: left;width: 500px;">我是要居中的浮动元素</div>
    </div>
    -->
    
    <!--不定宽的浮动元素-->
    <!--
    <div class="box">
        <p>我是浮动的</p>
        <p>我也是居中的</p>
    </div>
    -->
    
    <!--浮动 无论宽度-->
    <div class="parent">
        <div class="child">我是要居中的浮动元素</div>
    </div>
    
    
    </body>
    </html>

8.2 垂直居中

<style>
    /* 垂直居中 */
   
   /*   1. 单行内联元素垂直居中*/
    .box {
        height: 200px;
        line-height: 200px;
        background: #A3C5A8;
    }
    /*
      2. 块级元素垂直居中
      2.1 高度已知  absolute+负margin
    */
    .parent {
        height: 300px;
        background: #A3C5A8;
        position: relative;
    }
    .child {
        position: absolute;
        top: 50%;
        height: 100px;
        background: #eeeeee;
        margin-top: -50px;
    }
    */
    /*
      2.2.1   高度未知
      absolute+transform 部分浏览器存在兼容性问题
    */
    .parent {
        height: 300px;
        background: #A3C5A8;
        position: relative;
    }
    .child {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    
    /*
      2.2.2 flex+align-items*/
    .parent {
        height: 300px;
        background: #A3C5A8;
        display: flex;
        align-items: center;
    }
  
    /*
      2.2.3 table-cell+vertical-align
     */
    .parent {
        height: 300px;
        background: #A3C5A8;
        display: table-cell;
        vertical-align: middle;
    }
</style>

3 水平垂直居中

<style>
    /* 1 绝对定位+负margin  已知宽高  兼容所有浏览器*/
    .container {
        position: relative;
        height: 500px;
        background: #A3C5A8;
    }
    .center {
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: #666;
        top: 50%;
        left: 50%;
        margin: -50px 0 0 -50px;
    }
   
    /*2. absolute+transform 无需知元素宽高 需要考虑兼容性问题 */
    .container {
        position: relative;
        height: 500px;
        background: #A3C5A8;
    }
    .center {
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: #666;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    */
    
    /* 4  table-cell 无需知道宽高 */
    .container {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        height: 400px;
        width: 800px;
        background: red;
    }
    .center {
        display: inline-block;
    }
    
     /*3 flex*/
    .container {
        display: flex;
        width: 100px;
        height: 100px;
        background-color: #666;
        height: 500px;
        background: #A3C5A8;
        justify-content: center;
        align-items: center;
    }
    
    /*4 flex+margin 不能兼容低版本的IE浏览器*/
    .container {
        display: flex;
        height: 500px;
        background: #A3C5A8;
    }
    .center {
        margin: auto;
    }
</style>
<body>
<div class='container'>
    <div class='center' style="width: 100px;height: 100px;background-color: #666">水平垂直居中</div>
</div>
</body>
</html>

Muqiu7890

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
居中

1水平居中行内元素text-align: center;块级元素2.1 定宽 margin: 0 auto2.2 不定宽将子元素改为行内元素display: inline; 在给父元素使用text-align: center; <!DOCTYPE html> <html lang="en"> <head>...
复制链接

扫一扫