元素布局——CSS水平垂直居中

最新推荐文章于 2023-09-02 10:28:19 发布

moderate_ace

最新推荐文章于 2023-09-02 10:28:19 发布

阅读量1.1k

点赞数

分类专栏： HTML/CSS 文章标签：元素居中水平垂直居中 css居中元素布局

本文链接：https://blog.csdn.net/sinat_22599079/article/details/44873697

版权

本文总结了五种方法实现元素或文字在页面中水平垂直居中：1. 宽高固定布局；2. 表格布局适用于文字和图片；3. CSS3布局适合移动端百分比布局；4. 占位布局，高度固定；5. 利用margin:auto实现%布局的居中。兼容性覆盖了大部分现代浏览器。

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

总结一下 元素/文字 水平且垂直居中的方法。

1 . 最常用做法

关键词：宽高固定

<!DOCTYPE html>
<html>
<head>
    <style>
    .wrapper {
        position: relative;
        width: 400px;
        height: 400px;
        border: 1px solid #aaa;
    }
    .content {
        position: absolute;
        width: 200px;
        height: 200px;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -100px;
        background-color: #0f0;
    }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="content"></div>
</div>
</body>
</html>