div属性display: flex;设置垂直居中
时间: 2023-10-13 17:17:04 浏览: 44
使用display: flex;属性可以使元素成为一个弹性盒子,从而实现垂直居中。
具体实现方式如下:
1. 将父级元素设置为display: flex;属性。
2. 使用align-items: center;属性将子元素垂直居中。
示例代码如下:
```html
<style>
.container {
display: flex;
align-items: center;
height: 300px;
}
.box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<div class="container">
<div class="box"></div>
</div>
```
在上面的示例代码中,.container元素被设置为display: flex;属性,.box元素被垂直居中。同时,height属性也被设置为300px,以便更好地展示效果。
相关问题
display: flex后垂直居中
使用display: flex可以实现垂直居中的效果。具体步骤如下:
1. 在父容器上设置display: flex,将其变为一个flex容器。
2. 使用align-items属性来设置垂直方向的对齐方式。将align-items的值设置为center,即可实现垂直居中。
以下是一个示例代码:
```html
<style>
.container {
display: flex;
align-items: center;
/* 其他样式属性 */
}
</style>
<div class="container">
<!-- 子元素 -->
</div>
```
这样设置后,子元素就会在垂直方向上居中显示。
使用display:flex将div垂直居中于页面
使用 `display: flex` 属性也可以实现将 div 垂直居中于页面。您可以将 div 的父元素设置为 `display:flex` 并使用 `align-items` 属性将其垂直居中。如下所示:
```css
.parent {
display: flex;
align-items: center;
justify-content: center;
height: 100vh; /* 100% Viewport Height */
}
.child {
/* add your child element styles here */
}
```
在这个例子中,我们将 `.parent` 元素的高度设置为 `100vh`,这使得它占满整个视口高度。接下来,使用 `display: flex` 将其子元素水平和垂直居中。最后,您可以为 `.child` 元素添加任何其他样式,如背景颜色、边框等。
请注意,此方法需要设置父元素的高度,因此如果您的 div 高度是动态变化的,您可能需要使用 JavaScript 动态设置父元素的高度。