CSS:position+居中

html-css010

CSS:position+居中,第1张

position 的四个属性:static、absolute、relative、fixed

static:默认值

absolute:脱离文档结构,导致父元素坍塌;相对于最近的非static元素进行定位;使得inline元素被“块”化;使得元素已有的float失效。多个悬浮元素,后来者在上方;

relative:根据原来位置,导致自身位置的相对变化,而不会影响其他元素的位置、大小的变化。

产生新的定位上下文,影响子元素(如absolute属性元素定位)

fixed:根据浏览器确定位置

参考文章:https://www.cnblogs.com/wangfupeng1988/p/4322680.html

css原理:

vertical-align :指定行内元素(inline)和行内块级元素(inline-block)或表格单元格(table-cell)元素的垂直对齐方式。

文本垂直居中:

单行文本:设置line-height 和区域高度height 一致即可

多行文本垂直居中:

1、父级元素高度不固定,随内容变化:内填充padding-top = padding-bottom

2、父级元素高度固定:

父元素div:display:table

子元素div:display:table-cell;vertical-align:middle

子div垂直居中:

1、子div具体大小设置偏移

2、利用transform:translateX(-50%)translateY(-50%)

3、利用绝对布局absolute

4、利用vertical-align属性实现子div大小不固定垂直居中

5、利用display:flex:

justify-content: center/*实现水平居中*/

align-items:center/*实现垂直居中*/

参考链接:https://blog.csdn.net/u014607184/article/details/51820508

通过这样的Css样式就可以实现:

<div style="margin:0 autowidth:200px">

<input class="submit" id="btn" type="submit" value="注册" />

</div>

使用margin-left:automargin-right:auto可以让你的div居中对齐。

.style{margin-left:automargin-right:auto} 缩写形式为: .style{margin:0 auto} ,数字0 表示上下边距是0。

后面的那个width也是个很重要的属性,因为按钮的宽度非常小,所以要设置一个合适的width值才可以让按钮居中。

扩展资料

css中margin属性用法

margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。格式为-margin:10px 5px 15px 20px

实例:

1、margin:10px 5px 15px 20px

上边距是 10px,右边距是 5px,下边距是 15px,左边距是 20px;

2、margin:10px 5px 15px

上边距是 10px,右边距和左边距是 5px,下边距是 15px;

3、margin:10px 5px

上边距和下边距是 10px,右边距和左边距是 5px;

4、margin:10px

所有四个边距都是 10px。