首页 > 代码库 > css 垂直居中的一些方法
css 垂直居中的一些方法
总结：
方法一：
#main {
margin: 0 auto;
width: 100px;
height: 100px;
background-color: #000;
}
/*利用margin的水平方向上auto属性设置为自动使#main居中显示，#main需为块级元素而且必须指定宽度，背景是为了展示居中效果*/
方法二：
为#main添加一个父元素div
Html：
<div id=”#main-parent”>
<div id=”#main”></div>
</div>
Css:
#main-parent {
text-align: center;
}
#main {
display: inline-block;
width: 100px;
height: 100px;
background-color: #000;
}
将其父元素#main-parent设置文本居中属性text-align:center，再将#main设置为行内块元素inline-block显示，也可以实现居中
方法三：使用绝对定位
#main {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 50%;
margin-left: -50px;
/*也可以这样*/
/*-webkit-transform: translateX(-50%);*/
/*-moz-transform: translateX(-50%);*/
/*-ms-transform: translateX(-50%);*/
/*-o-transform: translateX(-50%);*/
/*transform: translateX(-50%);*/
}
方法四：使用flex布局
给#main添加父元素#main-parent，使其flex布局
#main-parent {
display: flex;
width: 1000px;
teight: 500px;
tustify-content: space-around;/*子元素水平居中*/
align-items: center; /*子元素垂直居中*/
}
css 垂直居中的一些方法