如何使用 flexbox 垂直居中文本？ [复制]

Posted 2023-03-05

【中文标题】如何使用 flexbox 垂直居中文本？ [复制]

【英文标题】：How do I vertically center text with flexbox? [duplicate]

【发布时间】：2021-09-04 17:10:21

【问题描述】：

我正在尝试重新制作谷歌搜索网站以获得乐趣，我需要将页脚中的所有文本垂直居中。

代码及其外观：

https://html-css-js.com/?html=%3C!DOCTYPE%20html%3E%0A%3Chtml%20lang=%22en%22%3E%0A%20%20%3Chead%3E%0A%20%20%20%20%3Cmeta%20charset=%22UTF-8%22%20/%3E%0A%20%20%20%20%3Cmeta%20http-equiv=%22X-UA-Compatible%22%20content=%22IE=edge%22%20/%3E%0A%20%20%20%20%3Cmeta%20name=%22viewport%22%20content=%22wi$*$dth=device-wi$*$dth,%20initial-scale=1.0%22%20/%3E%0A%20%20%20%20%3Clink%20rel=%22stylesheet%22%20href=%22styles.css%22%20/%3E%0A%20%20%20%20%3Clink%0A%20%20%20%20%20%20rel=%22stylesheet%22%0A%20%20%20%20%20%20href=%22https://fonts.googleapis.com/icon?family=Material%20Icons%22%0A%20%20%20%20/%3E%0A%20%20%20%20%3Ctitle%3EGoogle%3C/title%3E%0A%20%20%3C/head%3E%0A%20%20%3Cbutton%20type=%22button%22%20class=%22btn%20btn-light%22%3EGoogle%20Search%3C/button%3E%0A%20%20%3Cbutton%20type=%22button%22%20class=%22dark%20btn-light%22%3EI'm%20Feeling%20Lucky%3C/button%3E%0A%20%20%20%20%3Cul%3E%0A%20%20%20%20%20%20%3Cli%20class=%22right%20button%22%3E%3Ca%20href=%22#%22%3ESign%20In%3C/a%3E%3C/li%3E%0A%20%20%20%20%20%20%3Cli%20class=%22right%20icon%22%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class=%22material-icons%20navigation%20icon%22%3Eapps%3C/span%3E%0A%20%20%20%20%20%20%3C/li%3E%0A%20%20%20%20%20%20%3Cli%20class=%22right%22%3E%3Ca%20href=%22#%22%3EImages%3C/a%3E%3C/li%3E%0A%20%20%20%20%20%20%3Cli%20class=%22right%22%3E%3Ca%20href=%22#%22%3EGmail%3C/a%3E%3C/li%3E%0A%20%20%20%20%3C/ul%3E%0A%20%20%3Cdiv%3E%0A%20%20%20%20%3Cimg%20src=%22images/google_logo.png%22%20class=%22googleLogo%22%20/%3E%0A%20%20%3C/div%3E%0A%20%20%3Cinput%20type=%22text%22%3E%0A%20%20%3Cspan%20class=%22material-icons%20search%22%20style=%22font-size:%201.5em;%22%3Esearch%3C/span%3E%0A%20%20%3Cspan%20class=%22material-icons%20mic%22%20style=%22font-size:%202rem;%22%3Emic%3C/span%3E%0A%20%20%0A%20%20%3Cdiv%20class=%22topfooter%22%3E%0A%20%20%20%20United%20Kingdom%0A%20%20%3C/div%3E%0A%20%20%3Cfooter%3E%0A%20%20%20%20%3Cul%20class=%22footer%22%3E%0A%20%20%20%20%20%20%3Cli%3E%3Ca%20href=%22#%22%3ESettings%3C/a%3E%3C/li%3E%0A%20%20%20%20%20%20%3Cli%3E%3Ca%20href=%22#%22%3ETerms%3C/a%3E%3C/li%3E%0A%20%20%20%20%20%20%3Cli%3E%3Ca%20href=%22#%22%3EPrivacy%3C/a%3E%3C/li%3E%0A%20%20%20%20%20%20%3Cli%3E%3Ca%20href=%22#%22%3EHow%20Search%20works%3C/a%3E%3C/li%3E%0A%20%20%20%20%20%20%3Cli%3E%3Ca%20href=%22#%22%3EBusiness%3C/a%3E%3C/li%3E%0A%20%20%20%20%20%20%3Cli%3E%3Ca%20href=%22#%22%3EAdvertising%3C/a%3E%3C/li%3E%0A%20%20%20%20%20%20%3Cli%3E%3Ca%20href=%22#%22%3EAbout%3C/a%3E%3C/li%3E%0A%20%20%20%20%3C/ul%3E%0A%20%20%3C/footer%3E%0A%0A%20%20%3C/body%3E%0A%3C/html%3E%0A&css=*%20%7B%0A%20%20margin:%200;%0A%20%20padding:%200;%0A%20%20font-size:%2010px;%0A%20%20font-family:%20arial,%20sans-serif;%0A%7D%0A%0Ali%20%7B%0A%20%20float:%20right;%0A%20%20list-style-type:%20none;%0A%20%20margin-top:%2020px;%0A%7D%0A%0Aa%20%7B%0A%20%20text-decoration:%20none;%0A%20%20color:%20black;%0A%7D%0A%0A.left%20%7B%0A%20%20float:%20left;%0A%7D%0A%0A.left%20a%20%7B%0A%20%20margin-left:%2020px;%0A%7D%0A%0A.right%20%7B%0A%20%20margin-right:%2020px;%0A%7D%0A%0A.button%20%7B%0A%20%20background-color:%20#4485f4;%0A%20%20padding:%207px;%0A%20%20border-radius:%205%25;%0A%7D%0A%0A.button%20a%20%7B%0A%20%20color:%20#fff;%0A%7D%0A%0A.icon%20%7B%0A%20%20color:%20grey;%0A%7D%0A%0Aa%20%7B%0A%20%20justify-items:%20center;%0A%7D%0A.button%20%7B%0A%20%20margin-top:%2015px;%0A%7D%0A.icon%20%7B%0A%20%20margin-top:%207.5px;%0A%7D%0A%0Aimg%20%7B%0A%20%20position:%20absolute;%0A%20%20wi$*$dth:%20217px;%0A%20%20top:%2032%25;%0A%20%20left:%2050%25;%0A%20%20transform:%20translate(-50%25,%20-50%25);%0A%7D%0A%0Ainput%20%7B%0A%20%20position:%20absolute;%0A%20%20wi$*$dth:%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$*$d%20rgba(209,%20209,%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,%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,%20-50%25);%0A%20%20color:%20rgba(124,%20124,%20124,%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$*$d%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$*$d%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$*$dth:%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$*$dth:%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$*$d%20#dadce0;%0A%20%20color:%20#70757a;%0A%20%20font-size:%2013px;%0A%7D%0A&js=

【参考方案1】：

这里是如何使用 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>

【讨论】：

这对我不起作用。

请给我截图好吗