要让div居中显示，可以使用CSS的text-align属性设置为center，为了让div里面的内容居中显示，可以使用CSS的display属性设置为flex或inline-block,然后使用justify-content和align-items属性分别设置水平居中和垂直居中。
下面是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div居中显示</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.inner-div {
text-align: center;
border: 1px solid black;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="inner-div">
这里是居中的内容
</div>
</div>
</body>
</html>
在这个示例中，我们创建了一个名为container的外部div,将其display属性设置为flex,并使用justify-content和align-items属性分别设置水平居中和垂直居中，我们将这个容器的高度设置为100vh,使其占据整个视口高度，在container内部，我们创建了一个名为inner-div的子div,将其text-align属性设置为center,使其内部的内容居中显示，我们为这两个div添加了一些边框和内边距，以便更好地展示它们的居中效果。
相关问题与解答：
1、如何让div自适应宽度？
答：可以将div的display属性设置为inline-block或者flex,然后设置相应的宽度。display: inline-block; width: 50%; 或者 display: flex; width: 50%;，这样，div就可以根据其父元素的宽度自动调整宽度，实现自适应。
2、如何让div自适应高度？
答：可以将div的display属性设置为flex或者inline-block,然后设置相应的高度。display: flex; height: 100%; 或者 display: inline-block; height: 100%;，这样，div就可以根据其父元素的高度自动调整高度，实现自适应。
3、如何让div内的图片自适应大小？
答：可以将图片的display属性设置为block或者inline-block,然后设置相应的宽度和高度。img { display: block; width: 100%; height: auto;} 或者 img { display: inline-block; width: 100%; height: auto;}，这样，图片就可以根据其父元素的大小自动调整宽度和高度，实现自适应。
4、如何让div内的表格自适应大小？
答：可以将表格的display属性设置为table或者inline-table,然后设置相应的宽度和高度。table { display: table; width: 100%; height: auto;} 或者 table { display: inline-table; width: 100%; height: auto;}，这样，表格就可以根据其父元素的大小自动调整宽度和高度，实现自适应。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/114839.html
微信扫一扫 