如何解决如何使用 flexbox 垂直居中文本？
为了好玩，我正在尝试重新制作 google 搜索网站，我需要将页脚中的所有文本垂直居中。
代码及其外观：
;%0A%7D%0A%0Ainput%20%7B%0A%20%20position:%20absolute;%0A%20%20wi%24*%24dth:%20460px;%0A%20%20height:%2034px;%0A%20%20top:%2039%25;%0A%20%20left:%2050%25;%0A%20%20transform:%20translate(-50%25,%20-50%25);%0A%20%20border-radius:%2020px;%0A%20%20margin-top:%2019px;%0A%20%20border:%200.1px%20soli%24*%24d%20rgba(209,%20209,%200.658);%0A%20%20outline:%20none;%0A%20%20text-indent:%2040px;%0A%20%20font-size:%2013px;%0A%7D%0A%0A.search%20%7B%0A%20%20position:%20absolute;%0A%20%20top:%2041.6%25;%0A%20%20left:%2035.5%25;%0A%20%20transform:%20translate(-50%25,%20-50%25);%0A%20%20color:%20rgba(124,%20124,%200.658);%0A%7D%0A%0A.mic%20%7B%0A%20%20position:%20absolute;%0A%20%20top:%2041.6%25;%0A%20%20left:%2064.5%25;%0A%20%20transform:%20translate(-50%25,%200.658);%0A%7D%0A%0A.btn%20%7B%0A%20%20padding:%208px%2010px;%0A%20%20position:%20absolute;%0A%20%20top:%2049%25;%0A%20%20left:%2045.8%25;%0A%20%20transform:%20translate(-50%25,%20-50%25);%0A%20%20outline:%20none;%0A%20%20border:%201px%20soli%24*%24d%20#f8f9fa;%0A%20%20color:%20#3c4043;%0A%20%20background-color:%20#f8f9fa;%0A%20%20font-size:%2011.5px;%0A%7D%0A%0A.dark%20%7B%0A%20%20padding:%208px%2010px;%0A%20%20position:%20absolute;%0A%20%20top:%2049%25;%0A%20%20left:%2054.2%25;%0A%20%20transform:%20translate(-50%25,%20-50%25);%0A%20%20outline:%20none;%0A%20%20border:%201px%20soli%24*%24d%20#f8f9fa;%0A%20%20color:%20#3c4043;%0A%20%20background-color:%20#f8f9fa;%0A%20%20font-size:%2011.5px;%0A%7D%0A%0Afooter%20%7B%0A%20%20display:%20flex;%0A%20%20flex-direction:%20row;%0A%20%20position:%20fixed;%0A%20%20left:%200;%0A%20%20bottom:%200;%0A%20%20wi%24*%24dth:%20100%25;%0A%20%20height:%2040px;%0A%20%20background-color:%20whitesmoke;%0A%7D%0A%0A.footer%20li%20a%20%7B%0A%20%20color:%20#70757a;%0A%7D%0A%0A.topfooter%20%7B%0A%20%20position:%20fixed;%0A%20%20wi%24*%24dth:%20100%25;%0A%20%20left:%200;%0A%20%20bottom:%2041px;%0A%20%20background-color:%20whitesmoke;%0A%20%20padding:%2015px%2030px;%0A%20%20border-bottom:%201px%20soli%24*%24d%20#dadce0;%0A%20%20color:%20#70757a;%0A%20%20font-size:%2013px;%0A%7D%0A&js=){kind=link}
解决方法
以下是如何使用 flexbox 居中文本或任何元素：
- 首先声明
display: flex。现在： -
justify-content: center将儿童水平居中 -
place-items: center将垂直居中子项。
div {
width: 100%;
height: 100px;
background: #ccc;
display: flex;
justify-content: center;
place-items: center;
}<div>
This is centered
</div>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。