水平居中+垂直居中

最新推荐文章于 2024-09-16 09:20:49 发布

weixin_34396103

最新推荐文章于 2024-09-16 09:20:49 发布

阅读量60

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zgdawdl/p/10022962.html

本文详细介绍了使用CSS实现页面元素水平、垂直居中的多种方法，包括利用inline-block、table、absolute定位、transform、flex布局等技术，适用于不同浏览器版本。

页面结构都是:

<div class="parent" style="background-color:red;width: 400px;height: 400px;">
    <div class="child" style="background-color:blue;width: 200px;height: 200px;"></div>
</div>

一、水平居中

1.设置父元素和子元素，inline-block+text-align：ie6↑

.parent {
    text-align: center;
}

.child {
    display: inline-block;
}

2.设置子元素，table+margin： ie8↑

.child {
    display:table;
    margin:0 auto;
}

3.设置父元素和子元素，absolute+transform：ie10↑

.parent {
    position:relative;
}
.child {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
}

4.设置父元素和子元素，flex+margin：ie9↑

.parent {
    display:flex;
}
.child {
    margin:0 auto;
}

5.设置父元素，flex+justify-content：ie9↑

.parent {
    display:flex;
    justify-content:center;
}

二、垂直居中

1.设置父元素，table-cell+vertical-align：ie8↑

.parent {
    display:table-cell;
    vertical-align:middle;
}

2.设置父元素和子元素，absolute+transform：ie10↑

.parent {
    position:relative;
}
.child {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}

3.设置父元素，flex+align-items(可用于浮动元素)：ie9↑

.parent {
    display:flex;
    align-items:center;
}

三、水平+垂直

1.设置父元素和子元素，absolute+transform：ie10↑

.parent {
    position:relative;
}
.child {
    position:absolute;
    left:50%;
    top:50%;
    transform:tranplate(-50%,-50%);
}

2.设置父元素和子元素，inline-block+text-align+table-cell+vertical-align：ie8↑

.parent {
    text-align:center;
    display:table-cell;
    vertical-align:middle;
}
.child {
    display:inline-block;
}

3.设置父元素，flex+justify-content+align-items：ie9↑

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

转载于:https://www.cnblogs.com/zgdawdl/p/10022962.html