元素布局——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

版权

HTML/CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文总结了五种方法实现元素或文字在页面中水平垂直居中：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>

兼容性：所有浏览器

2 . 表格布局

关键词：文字图片

<!DOCTYPE html>
<html>
<head>
    <style>
    .wrapper {
        display: table;
        height: 400px;
        width: 400px;
        border: 1px solid #aaa;
    }
    .content {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="content">content</div>
    </div>
</body>
</html>

兼容性：ie8+/Chrome/Firefox/Opera/Safari

3 . CSS3布局

关键词：移动端 %布局

<!DOCTYPE html>
<html>
<head>
    <style>
    .wrapper {
        position: relative;
        width: 400px;
        height: 400px;
        border: 1px solid #aaa;
    }
    .content {
        position: absolute;
        width: 20%;
        height: 20%;
        top: 50%;
        left: 50%;
        background-color: #0f0;
        transform: translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
    }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="content"></div>
</div>
</body>
</html>

兼容性：ie9+/Chrome/Firefox/Opera/Safari

4 . 占位布局

关键词：高度固定

<!DOCTYPE html>
<html>
<head>
    <style>
    .wrapper {
        width: 400px;
        height: 400px;
        border: 1px solid #aaa;
    }
    .hidden {
        float: left;
        height: 50%;
        margin-bottom: -150px;/*为子元素高度一半*/
    }
    .content {
        clear: both;
        width: 300px;
        height: 300px;
        margin: 0 auto;
        background-color: #0f0;
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="hidden"></div>
        <div class="content"></div>
    </div>
</body>
</html>

兼容性：ie8+/Chrome/Firefox/Opera/Safari
原理：隐藏的div占据了半个父元素位置，并使需要居中的元素上移半个自身高度

5 . margin:auto布局

关键词：%布局

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