position:absolute的容器居中

web页面开发中,最经常是使用的当然要属于容器居中啦,“居中”有时候是一个很简单的问题,但是!有时候也让人苦恼的“牙痒痒”!
HTML代码如下:

    child container

CSS代码(不占据文档流,水平居中)如下:

# parents {    width: 100%;    position: relative;    background-color: pink;}# child {    width: 200px;    height: 50px;    position: absolute;    left: 0;    right: 0;    margin: auto;    background-color: # 1fb554;    text-align: center;}

CSS代码(占据文档流,水平居中)如下:

# parents {    width: 100%;    position: relative;    background-color: pink;}# child {    width: 200px;    height: 50px;    margin: auto;    background-color: # 1fb554;    text-align: center;}

那如果想要水平垂直居中的话,就要像下面这么写啦~
HTML代码和CSS代码如下:

# content{    position:absolute;    width:650px;    height:298px;    left:50%;    top:50%;    margin-left:-325px;  /*设置为宽度的一半*/    margin-top:-149px;   /*设置为高度的一半*/    background-color: pink;}HELLO, WORLD!

但是,上面有一个需要注意的地方,就是如果# content有父容器,那么其父容器的position不能设置成relative,否则垂直居中会失效————我学的还不够扎实,具体为什么会失效,我一下也将不出来,若以后长知识了,我再不上去,或者‘米娜桑’有知道的,也可以贴出来~~

关键字:css, 居中, position, width

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部