div中套一个居中的div 不使用flex布局
时间: 2023-10-20 09:05:47 浏览: 38
可以使用以下代码实现:
```html
<div style="text-align: center;">
<div style="display: inline-block;">
<!-- 内容 -->
</div>
</div>
```
第一个 `div` 通过设置 `text-align: center;` 实现水平居中,第二个 `div` 通过设置 `display: inline-block;` 实现垂直居中。需要注意的是,如果内部内容高度超过父元素高度,仍然会溢出。
相关问题
一个居中的div 不使用绝对定位 flex定位
使用flex布局实现一个居中的div:
HTML代码:
```
<div class="container">
<div class="center">这是一个居中的div</div>
</div>
```
CSS代码:
```
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.center {
width: 200px;
height: 100px;
background-color: #ccc;
text-align: center;
line-height: 100px;
}
```
解释:
.container 设置了 display:flex,将其变成了一个弹性容器,justify-content:center 和 align-items:center 使其内部元素在水平和垂直方向上居中。height: 100vh 设置容器高度为视口高度。
.center 是容器内部的元素,设置了宽高,背景颜色,文本居中和行高,使其显示为一个居中的div。
div中套一个居中的div
可以使用CSS实现:
HTML代码:
```
<div class="parent">
<div class="child">
<!-- 子元素内容 -->
</div>
</div>
```
CSS代码:
```
.parent {
display: flex;
justify-content: center;
align-items: center;
}
.child {
/* 子元素样式 */
}
```
以上代码使用了flex布局,将父元素设置为居中对齐,子元素则可以按照需要设置样式。