css 垂直居中的一些方法
Posted 小车厂
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 垂直居中的一些方法的主要内容,如果未能解决你的问题,请参考以下文章