position:absolute的容器居中

2016-07-27 23:42:00

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

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