前言：
现在我们对“css 垂直”可能比较看重，你们都想要学习一些“css 垂直”的相关知识。那么小编也在网摘上搜集了一些有关“css 垂直””的相关知识，希望姐妹们能喜欢，小伙伴们一起来学习一下吧！编辑排版 | 宋大狮
平台运营 | 小唐狮
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 -
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #css 垂直
