css多种方式实现元素的居中效果

来源：互联网发布：圈圈助手网络连接失败编辑：程序博客网时间：2024/06/06 00:52

效果

这里写图片描述

页面基本结构

<!DOCTYPE><html><head>    <style>        html,body{width:100%;height:100%;margin:0;padding:0;}        .box{}        .item{}    </style></head><body>    <div class="box">        <div class="item"></div>    </div></body></html>

方法

一、适用于父元素和子元素宽高都不固定

绝对定位拉伸效果(IE8+)

.box{    /*父级元素宽高自适应*/    width:100%;    height:100%;    background:#26a69a;}       .item{    position:absolute;    /*left/right/top/bottom都设为0会让元素被撕扯*/    left:0;    right:0;    top:0;    bottom:0;    width:50%;    height:50%;    /*再通过margin:auto实现居中*/    margin:auto;    background:#000;}

flex布局(IE10+)

.box{    width:100%;    height:100%;      display:flex;    display:-webkit-flex;    justify-content:center;    align-items:center;    background:#26a69a;}.item{    width:50%;    height:50%;    background:#000;}

-webkit-box布局(IE不兼容)

.box{    width:100%;    height:100%;      display:-webkit-box;    -webkit-box-pack:center;/*水平方向居中*/    -webkit-box-align:center;/*垂直方向居中*/    background:#26a69a;}.item{    width:50%;    height:50%;    background:#000;}

二、适用于子元素宽高固定的水平居中

magin+left/top(只是一种思考方法，并不一定最实用)

.box{    width:100%;    height:100%;      background:#26a69a;}.item{    position:absolute;    width:200px;    height:300px;    left:50%;    margin-left:-100px;/*自己宽的一半*/    top:50%;    margin-top:-150px;/*自己高的一半*/    background:#000;}

待补充ing。。。。

0 0