欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS居中完全指南_html/css_WEB-ITnose

程序员文章站 2022-05-17 13:17:16
...
原载于 CSS-Trick,本文着重提取文中的方法,不完全翻译。如有需要,直接原文查看。

人们经常抱怨在CSS中居中元素的问题,其实这个问题其实并不复杂,只是因为方法众多,需要根据情况从众多方法中选取一个出来。接下来,我们做一个‘决定树’来帮我们把问题变的简单一点。首先你需要居中:

  • 水平

    • 需要居中 inline或者 inline-*元素(如文字或者链接)?

    • 需要居中 block类的元素?

    • 需要居中多个 block元素?

  • 垂直

    • 需要居中 inline或者 inline-*元素(如文字或者链接)?

    • 需要居中 block类的元素?

  • 既水平又垂直

    • 固定宽高

    • 不固定宽高

    • 使用 flexbox

水平居中

水平居中 inline或者 inline-*元素

你可以轻松的在一个 block元素中水平居中一个 inline元素,以下代码对 inline, inline-block, inline-table和 inline-flex等有效

.parent {  text-align: center;}

水平居中 block类的元素

在 block元素被设定固定宽度的情况下,可以使用设置元素 margin-left和 margin-right的值为 auto的方法实现水平居中。

.child {  width: 400px;  margin: 0 auto;}

水平居中多个 block类的元素

通过 inline-block实现

.parent {  text-align: center;}.child {  display: inline-block;  text-align: left;}

通过 flexbox实现

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

垂直居中

垂直居中 inline或者 inline-*元素

单行

inline/text元素可以简单的用设置相同的上下 padding值达到垂直居中的目的。

.center {  pading-top: 30px;  padding-bottom: 30px;}

如果因为某种原因不能使用 padding的方法,你还可以设置 line-height等于 height来达到目的。

.center {  height: 100px;  line-height: 100px;  white-space: nowrap;}

多行

相同的上下 padding也可以适用于此种情况,如果不能生效,你可以尝试将该元素的父元素的 dispaly设置为 table,同时该元素的 dispaly设置为 table-cell,然后设置 vertical-align。

.parent {  display: table;  width: 200px;  height: 400px;}.child {  display: table-cell;  vertical-align: middle;}

如果上述方法不能使用,你可以尝试使用 flexbox,一个单独的 flexbox子元素可以轻易的在其父元素中居中。谨记,这种方法需要父元素有固定的高度。

.parent {  display: flex;  justify-content: center;  flex-direction: column;  height: 400px;}

如果上述两种方式均不能使用,你可以使用“幽灵元素”技术,这种方法采用伪元素 ::before撑开高度 ,文字垂直居中。

.parent {  position: relative;}.parent::before {  content: " ";  display: inline-block;  height: 100%;  width: 1%;  vertical-align: middle;}.child {  display: inline-block;  vertical-align: middle;}

垂直居中 block 类的元素

已知元素高度

.parent {  position: relative;}.child {  position: absolute;  top: 50%;  height: 100px;  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */}

未知元素高度

.parent {  position: relative;}.child {  position: absolute;  top: 50%;  transform: translateY(-50%);}

使用 flexbox

.parent {  display: flex;  flex-direction: column;  justify-content: center;}

既水平又垂直

固定宽高

.parent {  position: relative;}.child {  width: 300px;  height: 100px;  padding: 20px;  position: absolute;  top: 50%;  left: 50%;  margin: -70px 0 0 -170px;}

不固定宽高

.parent {  position: relative;}.child {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}

使用 flexbox

.parent {  display: flex;  justify-content: center;  align-items: center;}
相关标签: CSS居中完全指南