css居中布局的方法

最新推荐文章于 2022-11-09 16:51:57 发布

小白Hard

最新推荐文章于 2022-11-09 16:51:57 发布

阅读量319

点赞数

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

本文链接：https://blog.csdn.net/lly193426/article/details/107736167

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一.水平居中布局

文本/行内元素/行内块元素
原理：text-align只控制行内内容（文字、行内元素、行内块元素）如何相对他的块元素对齐。
其子元素宽度不能大于父元素的宽度，否则无效。
单个块级元素
原理：在margin有节余的同时如果左右margin设置了auto ，将会均匀分剩余空间。如果上下值设置了auto，其计算值为0；
使用时必须定宽，且不能大于父元素的宽度，否则无效。
任意个元素（flex)
原理：设置当前主轴方向为居中。
设置父元素如下:

#parent{
display:flex;
justify-content:center;
}

多个块级元素：
父元素设置：text-align:center;
子元素设置：display:inline-block;
使用绝对定位实现
父元素设置：

#parent{
position:relative;
}
#son{
position:absolute;
left:50%;
//margin-left:-50px;(已知宽度，为自身宽度的一半）
transform:translateX(-50%);

二.垂直居中

单行文本/行内元素/行内块元素
一般用于文字：
设置父元素属性：

#parent{
height:150px;
line-height:150px;
}

图片垂直居中
原理：vertical-align和line-height的基友关系。
代码如下：

#parent{
height:100px;
line-height:100px;
font-size:0;
}
img#child{
vertical-align:middle;
}

单个块元素
(1) 使用table-cell

#parent{
display:table-cell;
vertical-align:middle;
}

(2) 使用绝对定位实现：

#parent{
position:relative;
}
#child{
position:absolute;
top:50%;
transform:translateY(-50%);
//  height:50px;  margin-top:-25px;
}

#parent{
position:relative;
}
#child{
position:absolute;
top:0;
bottom:0;
margin:auto;
height:50px;
}

使用flex

#parent{
display:flex;
align-items:center;
}

三.水平垂直居中（即居中）

利用table-cell

#parent{
display:table-cell;
vertical-align:middle;
text-align:center; //如果是行内元素添加这个
}
#child{
display:table;
margin:0 auto;  //如果是块级元素就添加这个
}

代码实现
2. 定位position实现

       .parent {
            width:400px;
            height: 400px;
            background-color: red;
           position: relative;
        }
        .child {
            width: 200px;
            height: 200px;
            background-color: blue;
           position: absolute;
           top:50%;
           left: 50%;
           transform: translate(-50%,-50%);
        }

        .parent {
            width:400px;
            height: 400px;
            background-color: red;
           position: relative;
        }
        .child {
            width: 200px;
            height: 200px;
            background-color: blue;
           position: absolute;
           top:50%;
           left: 50%;
           margin-left: -100px;
           margin-top: -100px;
        }

        .parent {
            width:400px;
            height: 400px;
            background-color: red;
           position: relative;
        }
        .child {
            width: 200px;
            height: 200px;
            background-color: blue;
           position: absolute;
           left:0;
           right:0;
           top: 0;
           bottom: 0;
           margin: auto;
        }

利用flex实现

        .parent {
            width:400px;
            height: 400px;
            background-color: red;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .child {
            width: 200px;
            height: 200px;
            background-color: blue;          
        }