CSS 居中

来源:互联网 发布:thinkpad知乎 编辑:程序博客网 时间:2024/05/17 07:48

左右居中对齐

1.div 居中
给自己添加margin属性,并给div设置宽度,没有宽度或者有浮动都不会居中

div {    margin: auto;    width: 60%;}

2.文本居中对齐
在父级的元素中添加text-align:属性
.div {
text-align: center;
}

3.图片居中
给自己添加display:block和margin属性,并放在margin中

img {    display: block;    margin: auto;    width: 40%; /*有margin必须有auto*/}

4.使用绝对定位
父相对,子绝对
.parent {
position: relative;
width: 100%;
}
.child {
position: absolute;
left: 150px;
width: 300px;
background-color: #b0e0e6;
}

垂直居中对齐

1.父级元素中使用padding
div {
padding: 70px 0;
}
2.将line-height和父级的height设置为相同高度
div{
height: 100px;
line-height: 100px;
}

原创粉丝点击