css3 flex 垂直水平居中
时间: 2023-06-05 09:47:26 浏览: 215
CSS3的Flex布局提供了一种简单方便的方式实现水平和垂直居中。在一个父元素上,设置display: flex,并在其中的子元素上使用align-items和justify-content属性来实现。
要实现垂直居中,可以将父元素的align-items属性设置为center。这将使所有子元素在父元素垂直中心对齐。如果希望水平居中子元素,则将父元素的justify-content属性设置为center,这将使所有子元素在父元素水平中心对齐。
如果希望同时实现水平和垂直居中,可以将父元素的align-items和justify-content属性都设置为center。
以下是一个带有Flex布局的HTML和CSS代码示例,演示如何实现水平和垂直居中。
HTML
```
<div class="container">
<div class="box">居中文本</div>
</div>
```
CSS
```
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
height: 100vh; /* 设置高度,确保盒子居中显示 */
}
.box {
text-align: center;
}
```
在上面的示例中,父元素.container设置了display: flex以使用Flex布局,而子元素.box则具有居中文本的样式。通过设置父元素的align-items和justify-content属性值为center,子元素.box将在水平和垂直方向上居中。
在使用Flex布局时,需要注意IE9之前的浏览器不支持Flexbox,因此在进行兼容性设计时需要注意。
阅读全文