css 使div内 子元素 居中
时间: 2023-10-20 20:04:17 浏览: 44
可以使用以下 CSS 属性将子元素居中:
```
.parent {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
```
其中,`.parent` 为父元素的 class,`justify-content` 属性用于水平居中,`align-items` 属性用于垂直居中。 `display: flex;` 属性用于将父元素设置为弹性容器,使子元素可以进行居中操作。
相关问题
css 居中 div
在CSS中,居中一个div有多种方法,以下是其中的几种方法:
1.水平居中
1.1 使用display: inline-block。将父元素设置为text-align: center,将子元素设置为display: inline-block即可实现水平居中。
2.垂直居中
2.1 使用display: table-cell和vertical-align: middle。将父元素设置为display: table-cell和vertical-align: middle,将子元素放在其中即可实现垂直居中。这种方法可以使高度不同的元素都垂直居中。
2.2 使用position: absolute和transform: translateY(-50%)。将父元素设置为position: relative,将子元素设置为position: absolute,top: 50%和transform: translateY(-50%)即可实现垂直居中。这种方法可以使高度不同的元素都垂直居中。
2.3 使用display: flex和align-items: center。将父元素设置为display: flex和align-items: center,将子元素放在其中即可实现垂直居中。这种方法只兼容IE10+。
3.水平垂直居中
3.1 使用position: absolute和margin: auto。将父元素设置为position: relative,将子元素设置为position: absolute,top: 0,bottom: 0,left: 0,right: 0和margin: auto即可实现水平垂直居中。
css的div盒子在div中居中
以下是一种使用CSS将子div在父div中垂直水平居中的方法:
```html
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
<style>
.container {
height: 300px;
width: 300px;
border: 1px solid black;
background-color: aliceblue;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.box {
width: 120px;
height: 120px;
background: #55a9ff;
display: inline-block; margin: 0 auto;
vertical-align: middle;
}
</style>
```
其中,父div的display属性设置为table-cell,使其表现为表格单元格,然后使用vertical-align属性将子div垂直居中。子div的display属性设置为inline-block,使其表现为行内元素,然后使用margin属性将其水平居中。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)