html css 基础：嵌套DIV / DIV内文本居中

最新推荐文章于 2022-10-20 13:02:37 发布

Zonson9999

最新推荐文章于 2022-10-20 13:02:37 发布

阅读量888

点赞数

分类专栏： html-css

本文链接：https://blog.csdn.net/wuzhong8809/article/details/119838076

版权

本文介绍了如何使用HTML和CSS实现嵌套DIV的水平和垂直居中，以及DIV内部文本的居中对齐。通过设置margin属性、使用绝对定位和表格布局方式，可以达到理想的居中效果。同时，对于文本居中，可以通过text-align和line-height进行调整。

摘要由CSDN通过智能技术生成

嵌套DIV居中

box2 默认样式，靠左

<!DOCTYPE html>
<html lang="en">
   <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        
        <style>
            .box1 {
                width: 500px;
                height: 500px;
                background-color: #bfa;
            }
            .box2 {
                width: 100px;
                height: 100px;
                background-color: #f00;
            }
        </style>
   </head> 

   <body>
        <div class="box1">                   
            <div class="box2"> box

最低0.47元/天解锁文章

Zonson9999

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
html css 基础：嵌套DIV / DIV内文本居中

嵌套DIV居中box2 默认样式，靠左<!DOCTYPE html><html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
复制链接

扫一扫