首页 css3 正文

我要投稿

css3垂直水平居中-CSS垂直和水平完全居中指南

bendan520 css3

2023-08-21 0 8,111 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

中文（简体）： css-tricks，翻译：OurJS

居中仍然是CSS中指责的典型代表。为什么这么难实现？所以有人被取笑了。我认为问题不在于没有办法做到，只是根据情况有很多不同的形式，但很难弄清楚使用什么方法。

所以我写这篇文章，希望能让他更容易。

水平中心内联

元素（内联或内联-*）居中？

您可以相对于父块级元素居中对齐他

.center-children {
  text-align: center;
}

块级元素居中？

例如，您可以通过将左边距和右边距设置为自动（也设置宽度，否则它将填充整个容器并且您看不到居中）来居中。

.center-me {
  margin: 0 auto;
}

如果有很多块级元素怎么办？

如果您有非常均匀的元素，需要在一行中水平居中，则最好使用不同的显示类型。这是一个使用内联块和弹性的反例。

在线示例：


  
    I'm an element that is block-like with my siblings and we're centered in a row.
  
  
    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.
  
  
    I'm an element that is block-like with my siblings and we're centered in a row.
  


  
    I'm an element that is block-like with my siblings and we're centered in a row.
  
  
    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.
  
  
    I'm an element that is block-like with my siblings and we're centered in a row.

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中有点棘手内联

元素（内联或内联-*）是否居中，如文本和链接？

是单行吗？

有时元素可以垂直居中，仅仅是因为它们具有相等的上下填充

.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

如果由于个别原因填充不起作用，并且文本不换行，则可以使用行高将文本与高度等同对齐。

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

是多行吗？

这

上下划桨的方法也可以居中多行，但如果这不起作用，可以让文本容器以表格单元格模式显示，然后将文本的垂直对齐属性设置为对齐，就像 Talbe 一样

在线演示：


  
    
      I'm vertically centered multiple lines of text in a real table cell.
    
  


  I'm vertically centered multiple lines of text in a CSS-created table layout.

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;
}

块级元素是否垂直居中？

你知道元素的高度吗？

由于许多原因，不知道网页布局的高度是很常见的。

但是，如果您的布局具有固定的高度，则可以像这样垂直居中：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* 如果没有使用: border-box; 的盒子模型则需要设置这个 */
}

元素的高度未知

虽然未知，但仍然可以将长度推低 50%

在线演示：

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

你能使用弹性框吗？

毫不奇怪，使用FlexBox特别容易。

  
  
     I'm a block-level element with an unknown height, centered vertically within my parent.

body {
  background: #f06d06;
  font-size: 80%;
}
main {
  background: white;
  height: 300px;
  width: 200px;
  padding: 20px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  resize: vertical;
  overflow: auto;
}
main div {
  background: black;
  color: white;
  padding: 20px;
  resize: vertical;
  overflow: auto;
}

同时水平和垂直居中

元素具有固定的长度和高度

如果元素的长度和高度是固定的，则需要先绝对居中css3垂直水平居中，然后向上和向左移动长度的 50%css3垂直水平居中，这具有出色的跨浏览器支持。

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

元素的长度高度未知

如果您不知道高度和长度（可变），则可以使用 transofrm 属性在两个方向上平移负 50%

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

若要在 CSS 中为文本添加蒙版线性渐变效果css3文字描边，可以使用 CSS 的文本描边属性以及线性渐变背景。下面是一个示例代码： '''css/*创建渐变背景*/.gradient-background{background-image：linear-gradient（toright，#ff0000css3文字描边，#00ff00）; }/*为文本添加遮罩*/.stroked-text{-webkit-text-fill-color：transparent;/*使文本透明*/-webkit-text-stroke：2px;/*设置遮罩长度*/-webkit-text-stroke-color：#000000;/*设置遮罩颜色*/}'''使用前面的代码，您可以将文本的遮罩设置为线性渐变。您可以根据需要自定义渐变的开始、结束和颜色。之后，在 HTML 中使用此 CSS 类来应用治疗效果：“html