CSS中各种居中问题

最新推荐文章于 2022-06-19 15:16:06 发布

Mr.R゛

最新推荐文章于 2022-06-19 15:16:06 发布

阅读量129

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/renjie123321/article/details/108742793

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.元素水平居中

1.1在父元素上使用text-align:center

father {
        text-align: center;  
    }

1.2为元素设置以下属性

margin : 0 auto;

1.3多个块级元素在一行居中

将块级元素设置为行内块级inline-block，然后父元素给text-align:center

<style type="text/css">
                #container {
                    text-align: center;
                    height: 100px;
                    background: gray;
                }
                .mydiv {
                    display: inline-block;
                    width: 100px;
                    height: 100px;
                    background: red;
                }
        </style>
        <body>
            <div id="container">
                <div class="mydiv"></div>
                <div class="mydiv"></div>
                <div class="mydiv"></div>
            </div>
        </body>

1.4设置相对布局和绝对布局

设置距离左边50%，再用负margin拉回去

div1{
  position: relative;
  
  
}
div2{
   position: absolute;
   width: 200px;
   left: 50%;
   margin-left: -100px;
}

2.元素垂直居中

2.1单行行内元素居中

设置display为inline-block，并给出行高等于元素高度，即line-height与height相同。

2.2设置相对布局和绝对布局

<style type="text/css">
            #container {
                position: relative;
                width: 200px;
                height: 200px;
                background: gray;
            }
            .mydiv {
                width: 100px;
                height: 100px;
                margin: auto;

            **  position: absolute;
                top: 0px;
                bottom: 0px;
                left: 0px;
                right: 0px;     **

                background: red;
            }
        </style>
        </head>
        <body>
        <div id="container">
            <div class="mydiv"></div>
            
        </div>

2.3 设置table-cell + vartical-align:middle属性

设置父元素display为table-cell，并给vartical-align:middle

3.使用弹性盒布局

在块级元素中
div{
display: flex; //
}
在行内元素中可使用line=flex
.box{
display: inline-flex;
}

在元素当中添加align-items属性
    div{
display: flex;
align-items:center;
justify-content:center;    
}

补充：
align-items属性

    align-items属性定义项目在交叉轴上如何对齐。有五个值：

    flex-start //可以理解为top
    flex-end //理解为bottom
    center //以父容器y轴的中轴线为中心，所有子元素都垂直居中于该线
    baseline //项目的第一行文字的基线对齐
    stretch //如果项目未设置高度或设为auto，将占满整个容器的高度