掘金 css水平垂直居中的几种方法
CSS水平垂直居中是前端开发中经常用到的一个技巧。本文将介绍几种常用的方法来实现CSS的水平垂直居中。
方法一：使用Flexbox布局
Flexbox是CSS3中的一种布局模式，可以轻松实现元素的水平垂直居中。首先，将父元素的display属性设置为flex，然后使用justify-content和align-items属性分别控制子元素在水平和垂直方向上的居中方式。
示例代码：
```
<div class="container">
  <div class="box">Flexbox</div>
</div>
<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 200px;
  border: 1px solid #000;
}
.box {
  width: 100px;
  height: 50px;
  background-color: #ccc;
  text-align: center;
  line-height: 50px;
}
</style>
```
方法二：使用绝对定位和负边距
这种方法适用于父元素已知宽高的情况。首先，将父元素的position属性设置为relative，子元素的position属性设置为absolute。然后，通过设置子元素的top、bottom、left、right属性为50%以及负边距来实现水平垂直居中。
示例代码：
```
<div class="container">
  <div class="box">Absolute Positioning</div>
</div>
<style>css设置文字垂直居中
.container {
  position: relative;
  width: 300px;
  height: 200px;
  border: 1px solid #000;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 50px;
  background-color: #ccc;
  text-align: center;
  line-height: 50px;
}
</style>
```
方法三：使用table和table-cell
这种方法通过将父元素的display属性设置为table，子元素的display属性设置为table-cell来实现水平垂直居中。需要注意的是，父元素的宽高需要设置为100%。
示例代码：
```
<div class="container">
  <div class="box">Table and Table-cell</div>
</div>
<style>
.container {
  display: table;
  width: 300px;
  height: 200px;
  border: 1px solid #000;
}
.box {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 100px;
  height: 50px;
  background-color: #ccc;
}
</style>
```
方法四：使用transform属性
这种方法适用于父元素已知宽高的情况。首先，将父元素的position属性设置为relative，子元素的position属性设置为absolute。然后，通过设置子元素的top、left属性为50%以及使用transform属性的translate函数来实现水平垂直居中。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。