首页 > 代码库 > 如何居中一个元素
如何居中一个元素
水平居中:行内元素、块级元素、浮动、绝对定位
行内:父元素设置 水平居中: text-align:center 垂直居中:line-height:height值
块级: 水平居中:margin: 0 auto
垂直居中:
确定高:除父元素line-height外,当前元素:
vertical-align:middle;// 垂直居中对齐
display:inline|inline-block 块级元素转行级元素
不确定高:
父元素的padding-top和padding-bottom一样
浮动:不确定宽和确定宽
不确定宽:父元素的left:50%;和自身的right:50%;position:relative;
<div class="outerbox"> <div class="innerbox">我是浮动的</div> </div>
.outerbox{ float:left; position:relative; left:50%; }
.innerbox{ float:left; position:relative; right:50%; }
确定宽: 不确定宽的方法或算出值
.outerbox{ background-color:pink; width:500px ;
margin: -150px 0 0 -250px; /*使用marin向左移动250px,保证元素居中*/
position:relative; left:50%; top:50%; }
绝对:
- .outerbox{
- position: absolute; /*绝对定位*/
- width: 500px;
- height:300px;
- background: red;
- margin: 0 auto; /*水平居中*/
- left: 0; /*此处不能省略,且为0*/
- right: 0; /*此处不能省略,且为0*/
- }
如何居中一个元素