CSS水平居中_垂直居中_水平垂直居中

作者: 鲁智深 分类: div+css 发布时间: 2013-11-08 23:41

margin水平居中

1
2
3
<div id="mar">
<div id="mar1">margin水平居中</div>
</div>

css代码

1
2
3
4
5
6
7
8
9
10
/* 水平居中 */
#mar{
    background-color: red;
}
#mar1{
    width: 300px;
    height: 100px;
    background-color: rgb(179, 255, 0);
    margin: 0 auto;
}

文本方式水平居中

1
2
3
<div id="text">
<div id="text1">文本方式水平居中</div>
</div>

css代码

1
2
3
4
5
6
7
8
9
10
11
/* 文本方式居中 */
#text{
    background-color: red;
    text-align:center;
}
#text1{
    width: 300px;
    height: 100px;
    background-color: rgb(0, 162, 255);
    display:inline-block;
}

position定位居中

1
2
3
<div id="position">
<div id="position1">position方式水平居中</div>
</div>

css代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 定位方式左右居中 */
#position{
    height: 100px;
    background-color: red;
    position: relative;
}
#position1{
    width: 300px;
    height: 100px;
    background-color: rgb(176, 204, 206);
    position:absolute;
    left: 50%;
    transform:translateX(-50%);
}

文本方式垂直居中

1
2
3
<div id="topBotton">
<div id="topBotton1">文本方式垂直居中</div>
</div>

css代码

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 文本方式垂直居中 */
#topBotton{
    height: 600px;
    width: 300px;
    background-color: red;
    vertical-align:middle;
    display: table-cell;
}
#topBotton1{
    height: 100px;
    width: 300px;
    background-color: rgb(55, 0, 255);
}

定位方式垂直居中

1
2
3
<div id="position-middle">
<div id="position-middle1">定位方式方式垂直居中</div>
</div>

css代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 定位方式垂直居中 */
#position-middle{
    height: 600px;
    width: 300px;
    background-color: red;
    position: relative;
}
#position-middle1{
    height: 100px;
    width: 300px;
    background-color: rgb(55, 0, 255);
    position:absolute;
    top: 50%;
    transform:translateY(-50%);
}

文本方式水平垂直居中

1
2
3
<div id="text-middle-center">
<div id="text-middle-center1">文本方式水平垂直居中</div>
</div>

css代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 文本方式水平垂直居中 */
#text-middle-center{
    height:300px;
    width: 300px;
    background-color: red;
    text-align:center;
    vertical-align:middle;
    display: table-cell;
}
#text-middle-center1{
    height: 100px;
    width: 100px;
    background-color: rgb(55, 0, 255);
    display:inline-block;
}

定位方式水平垂直居中

1
2
3
<div id="position-middle-center">
<div id="position-middle-center1">定位方式水平垂直居中</div>
</div>

css代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 定位方式水平垂直居中 */
#position-middle-center{
    height:300px;
    width: 300px;
    background-color: red;
    position: relative;
}
#position-middle-center1{
    height: 100px;
    width: 100px;
    background-color: rgb(55, 0, 255);
    position:absolute;
    left: 50%;
    top: 50%;
    transform:translate(-50%,-50%);
}

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注