CSS/html各种div 等元素居中方法

来源：互联网发布：php微信群发接口开发编辑：程序博客网时间：2024/05/22 07:52

元素居中这个样式真是有相当多的页面都在使用，在这里，跟大家分享几种好用的居中方法

1、控制margin - - - - - -margin:0 auto;
#d1{
width:500px;
height:300px;
margin:0 auto;
}

!注意，这个要求居中元素必须是块级元素，且必须设置宽，否则无效；

2、利用text-align - - - - - -text-align: center; （推荐）

#d2{    text-align: center;    }#d2>div{        display: inline-block;        width:300px;        height:100px;        background: #aff;    }!注意，这个设定是要居中的元素为行内块元素，只需要加一个父元素并给其设置文字居中即可，这个相对万能一些，而且没有兼容性问题，个人也最喜欢用这个；

3、CSS3 过渡属性 transform - - - - - -transform: translate(-50%);

CSS3 位移#d3{        position: fixed;        top:30%;        left:50%;        transform: translate(-50%);        width:300px;        height:100px;        background: #B948FF;    }    元素先向左移动父元素宽的50%，后以自身为主，沿X轴向右移动自身的宽度的50%，正好居中    （IE 10 以下不支持此属性）

实用代码展示

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>元素居中</title>    <style>        #d1{            width:300px;            height:100px;            background: #f0f;            margin:20px auto;        }        #d2{            text-align: center;        }        #d2>div{            display: inline-block;            width:300px;            height:100px;            background: #aff;        }        #d3{            position: fixed;            top:60%;            left:50%;            transform: translate(-50%);            width:300px;            height:100px;            background: #B948FF;        }        #d4{            width: 800px;            height:200px;            border: 2px solid #000;        }        #d4>div{            position: relative;            top:50%;            left: 50%;            transform: translate(-50%,-50%);            width:300px;            height:100px;            background: #FFC615;        }    </style></head><body>    <div id="d1"></div>    <div id="d2">        <div></div>    </div>    <div id="d3"></div>    <div id="d4" style="">        <div></div>    </div></body></html>

效果图

这里写图片描述

阅读全文

0 0