弹层高度宽度不确定,始终上下左右居中(css方法)

1.translate定位 这是css3 transform的属性 ,可以将宽高度设为百分比 IE browser

html代码:

 

我是translate居中定位

css代码:


2.margin居中定位  不需要确定div的宽高度 让top,bottom,left,right都为0 再加个margin:auto 神来之笔 IE browser< IE 8不支持

html代码:

<body>
        <div class="marginCenter">我是margin居中定位div>
    body>

css代码:

<style>
          *{margin:0;padding:0}
          .marginCenter{ width:200px; height: 200px; position: absolute;left:0; top:0; right:0; bottom: 0; margin: auto; background: #f2056e;}
        style>

你可能感兴趣的:(基础知识)