div的居中效果

最新推荐文章于 2024-09-30 15:42:36 发布

菜鸟一只请包涵

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量152

点赞数 3

文章标签：前端 html

本文链接：https://blog.csdn.net/WQearl/article/details/138998871

版权

一两个div，设置一个div在另一个div中水平居中

1. 方法1：使用dispaly:inline-block 和 text-align:center

<!DOCTYPE html>
<html>

<style>
    #outer {
        height: 450px;
        background: palegreen;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #E9E9E9;
        text-align: center;
    }

    #inner {
        width: 800px;
        height: 300px;
        background: cornflowerblue;
        display: inline-block;
    }
</style>
<body>

<div id="outer">
    <div id="inner">
        这是内部div
    </div>
</div>
</body>
</html>