优秀的编程知识分享平台

网站首页 > 技术文章 正文

CSS问题:全!如何实现元素的垂直水平居中?

nanyue 2024-09-02 19:08:14 技术文章 7 ℃


编辑排版 | 宋大狮

平台运营 | 小唐狮


ONE 问题描述

2023年5月6号记,久违了大家。

今天要和大家分享的是关于如何实现元素的垂直水平居中。

最近在整理有关CSS的公司真实面试题,但因为五一假期的原因,进度一直被延误。今天,分享一下整理的成果之一,关于项目中常用的,元素垂直水平居中的实现方式。

具体的需求:按元素分类列举、把常用和不常用的实现方式分开、尽量全面。

具体的问题:1、元素分类有哪些;2、每种元素如何实现,哪些实现方式又是最常用的、最好用的。

今天,我们就在这篇文章,用最简洁的语言,来好好地理理上述问题。


TWO 问题解决

一、代码总览

最好用的元素垂直水平居中的代码如下,复制即可直接使用!

【最好用的垂直居中方式】
1、两行代码实现。将父元素设置为 Flex 布局,再给要居中的子元素添加margin:auto。
2、对于 行元素、行块元素、块元素 都适用。

<body>
<div class="fatherDiv">
<div class="sonDiv">哈哈哈哈</span>
</div>
</body>

<style>
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

display: flex;
}

/* 子元素 */
.sonDiv {
background-color: pink;

margin: auto;
}
</style>


二、问题解析

1、问:元素分类有哪些?

答:

块元素,display: block; ,自己独占一行,并且可以设置宽高;

行块元素,display: inline-block; ,在同一行显示,并且可以设置宽高;

行元素,display: inline; ,在同一行显示,并且不可以设置宽高。


2、问:每种元素如何实现,哪些实现方式又是最常用的、最好用的?

答:

行元素:

1、text-align + line-height

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

text-align: center;
line-height: 500px;
}

/* 子元素 */
.sonDiv {
background-color: pink;
display: inline;
}

2、display: table-cell;

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

display: table-cell;
text-align: center;
vertical-align: middle;
}

/* 子元素 */
.sonDiv {
background-color: pink;
display: inline;
}

3、display: flex;【好用】

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

display: flex;
justify-content: center;
align-items: center;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
}

4、display: flex;【好用】

        /* 父元素 */
        .fatherDiv {
            width: 500px;
            height: 500px;
            background-color: green;

            display: flex;
        }

        /* 子元素 */
        .sonDiv {
            width: 200px;
            height: 200px;
            background-color: pink;
            display: inline;            margin: auto;
        }

5、position: absolute;

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

position: relative;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}

6、position: absolute;

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

position: relative;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;

position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}


7、position: absolute;【好用】

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

position: relative;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

8、display: grid;

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

display: grid;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;

margin: auto;
}

9、display: grid;

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

display: grid;
justify-content: center;
align-items: center;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
}

行块元素:

1、text-align + line-height + vertical-align

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

text-align: center;
line-height: 500px;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;

vertical-align: middle;
}


2、display: table-cell;

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

display: table-cell;
text-align: center;
vertical-align: middle;
}

/* 子元素 */
.sonDiv {
background-color: pink;
display: inline-block;
}

3、display: flex;【好用】

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

display: flex;
justify-content: center;
align-items: center;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
}

4、display: flex;【好用】

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

display: flex;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
 display: inline-block;
 margin: auto;
}

5、position: absolute;

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

position: relative;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}

6、position: absolute;

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

position: relative;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;

position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}


7、position: absolute;【好用】

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

position: relative;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

8、display: grid;

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

display: grid;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;

margin: auto;
}

9、display: grid;

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

display: grid;
justify-content: center;
align-items: center;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
}

块元素:

1、display: table-cell;

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

display: table-cell;
vertical-align: middle;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;

margin: auto;
}

2、display: flex;【好用】

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

display: flex;
justify-content: center;
align-items: center;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
}

3、display: flex;【好用】

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

display: flex;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
 display: block;
 margin: auto;
}

4、position: absolute;

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

position: relative;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}

5、position: absolute;

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

position: relative;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;

position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}


6、position: absolute;【好用】

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

position: relative;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

7、display: grid;

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

display: grid;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;

margin: auto;
}

8、display: grid;

/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;

display: grid;
justify-content: center;
align-items: center;
}

/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
}


- END -

最近发表
标签列表