CSS居中方法大全

栏目: CSS · 发布时间: 5年前

内容简介:在块级父元素中让内联元素居中。如果要让多个块级元素在同一水平线上居中,那么可以修改它们的CSS:

在块级父元素中让内联元素居中。

CSS居中方法大全
CSS居中方法大全

块级元素

CSS居中方法大全
CSS居中方法大全

多个块级元素

如果要让多个块级元素在同一水平线上居中,那么可以修改它们的 display 值。这里有两个示例,其中一个使用了 inline-block 的显示方式,另一个使用了 flexbox 的显示方式。 HTML:

<main class="inline-block-center">
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
</main>

<main class="flex-center">
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
</main>
复制代码

CSS:

body {
  background: #f06d06;
  font-size: 80%;
}

main {
  background: white;
  margin: 20px 0;
  padding: 10px;
}

main div {
  background: black;
  color: white;
  padding: 15px;
  max-width: 125px;
  margin: 5px;
}

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

.flex-center {
  display: flex;
  justify-content: center;
}
复制代码
CSS居中方法大全

如果你想让多个垂直堆栈的块元素,那么仍然可以通过设置 margin-leftmargin-rightauto 来实现。 HTML:

<main>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
</main>
复制代码

CSS:

body {
  background: #f06d06;
  font-size: 80%;
}

main {
  background: white;
  margin: 20px 0;
  padding: 10px;
}

main div {
  background: black;
  margin: 0 auto;
  color: white;
  padding: 15px;
  margin: 5px auto;
}

main div:nth-child(1) {
  width: 200px;
}
main div:nth-child(2) {
  width: 400px;
}
main div:nth-child(3) {
  width: 125px;
}
复制代码
CSS居中方法大全

垂直居中

内联或类内联元素(譬如文本或链接)

单行

CSS居中方法大全
只需添加等值的 padding-toppadding-bottom

就可以实现垂直居中。

CSS居中方法大全

如果不能使用 padding 属性来实现垂直居中,而且已知文本不会换行,那么就可以让 line-heightheight 相等,从而实现垂直居中。

CSS居中方法大全

多行

对于多行文本,同样可以使用等值 padding-toppadding-bottom 的方式实现垂直居中。如果你在使用过程中发现这种方法没见效,那么你可以通过 CSS 为文本设置一个类似 table-cell 的父级容器,然后使用 vertical-align 属性实现垂直居中。 HTML:

<table>
  <tr>
    <td>
      I'm vertically centered multiple lines of text in a real table cell.
    </td>
  </tr>
</table>

<div class="center-table">
  <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
</div>
复制代码

CSS:

body {
  background: #f06d06;
  font-size: 80%;
}

table {
  background: white;
  width: 240px;
  border-collapse: separate;
  margin: 20px;
  height: 250px;
}

table td {
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  /* default is vertical-align: middle; */
}

.center-table {
  display: table;
  height: 250px;
  background: white;
  width: 240px;
  margin: 20px;
}
.center-table p {
  display: table-cell;
  margin: 0;
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  vertical-align: middle;
}
复制代码
CSS居中方法大全

还可以使用 flexbox 实现垂直居中,对于父级容器为 display: flex 的元素来说,它的每一个子元素都是垂直居中的。

CSS居中方法大全
CSS居中方法大全

上述方法只适用于父级容器拥有确定高度的元素。如果上述方法都不起作用,那么你就需要使用被称为幽灵元素(ghost element)的解决方式:在垂直居中的元素上添加伪元素,设置伪元素的高等于父级容器的高,然后为文本添加 vertical-align: middle; 样式,即可实现垂直居中。

CSS居中方法大全

HTML:

<div class="ghost-center">
  <p>I'm vertically centered multiple lines of text in a container. Centered with a ghost pseudo element</p>
</div>
复制代码

CSS:

body {
  background: #f06d06;
  font-size: 80%;
}

div {
  background: white;
  width: 240px;
  height: 200px;
  margin: 20px;
  color: white;
  resize: vertical;
  overflow: auto;
  padding: 20px;
}

.ghost-center {
  position: relative;
}
.ghost-center::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.ghost-center p {
  display: inline-block;
  vertical-align: middle;
  width: 190px;
  margin: 0;
  padding: 20px;
  background: black;
}
复制代码
CSS居中方法大全

块级元素

已知元素高度

.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; */
}
复制代码
CSS居中方法大全
CSS居中方法大全

元素高度未知

如果我们不知道元素的高度,那么就需要先将元素定位到容器的中心位置,然后使用 transformtranslate 属性,将元素的中心和父容器的中心重合,从而实现垂直居中。

CSS居中方法大全
CSS居中方法大全
CSS居中方法大全

使用flexbox

CSS居中方法大全
CSS居中方法大全
CSS居中方法大全

水平垂直居中

宽高固定

设定父级容器为相对定位的容器,设定子元素绝对定位的位置 position: absolute; top: 50%; left: 50% ,最后使用负向 margin 实现水平和垂直居中, margin 的值为宽高(具体的宽高需要根据实际情况计算 padding )的一半。

CSS居中方法大全
CSS居中方法大全
CSS居中方法大全

宽高未知

CSS居中方法大全
如果无法获取确定的宽高,同样需要设定父级容器为相对定位的容器,设定子元素绝对定位的位置 position: absolute; top: 50%; left: 50% 。不同的是,接下来需要使用 transform: translate(-50%, -50%);

实现垂直居中。

CSS居中方法大全
CSS居中方法大全
使用 transform 有一个缺陷,就是当计算结果含有小数时(比如 0.5 ),会让整个元素看起来是模糊的,一种解决方案就是为父级元素设置 transform-style: preserve-3d;

样式。

CSS居中方法大全

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

颠覆者:周鸿祎自传

颠覆者:周鸿祎自传

周鸿祎、范海涛 / 北京联合出版公司 / 2017-11 / 49.80元

周鸿祎,一个在中国互联网历史上举足轻重的名字。他被认为是奠定当今中国互联网格局的人之一。 作为第一代互联网人,中国互联网行业最好的产品经理、创业者,他每时每刻都以自己的实践,为互联网的发展贡献自己的力量。 在很长一段时间内,他没有在公共场合发声,甚至有粉丝对当前死水一潭的互联网现状不满意,发出了“人民想念周鸿祎”的呼声。 但周鸿祎在小时候,却是一个踢天弄井,动不动就大闹天宫的超级......一起来看看 《颠覆者:周鸿祎自传》 这本书的介绍吧!

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具