您的位置：首页 > Web前端 > CSS

CSS垂直水平居中方式大全(二)----水平垂直居中

2017-12-01 16:18 387 查看

1.利用绝对定位+transform(不固定宽高水平垂直居中)

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>居中</title>
<style>
#box {
position: relative;
width: 500px;
height: 400px;
background: #faebcc;
}
#child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
}
</style>
</head>
<body>

<div id="box">
<div id="child">Hello world</div>
</div>

</body>
</html>

效果:

2.利用绝对定位+margin(.child宽高固定)

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>居中</title>
<style>
#box {
position: relative;
width: 500px;
height: 400px;
background: #faebcc;
}
#child {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 80px;
background: #999999;
margin: -40px 0 0 -50px;/*负值取宽、高的一半*/
}
</style>
</head>
<body>

<div id="box">
<div id="child">Hello world</div>
</div>

</body>
</html>

效果:

3.利用定位与margin:auto

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>居中</title>
<style>
#box {
position: relative;
width: 500px;
height: 400px;
background: #faebcc;
}
#child {
position: absolute;
width: 100px;
height: 80px;
background: #DDDDDD;
top: 0;    right: 0;    bottom: 0;    left: 0;    margin: auto;
}
</style>
</head>
<body>

<div id="box">
<div id="child">Hello world</div>
</div>

</body>
</html>

效果:

4.利用display:table-cell

CSS中有一个用于竖直居中的属性vertical-align，但只有当父元素为td或者th时，这个vertical-align属性

才会生效，对于其他块级元素，例如 div、p等，默认情况下是不支持vertical-align属性的，设置块级元素的

display类型为table-cell，激活vertical-align属性，但display:table-cell存在兼容性问题，

所以这种方法没办法跨浏览器兼容。

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>居中</title>
<style>
#box {
display: table-cell;
vertical-align: middle;/*垂直*/
text-align: center;/*水平*/
width: 500px;
height: 400px;
background: #faebcc;
}
#child {
display: inline-block;
width: 100px;
height: 80px;
background: #f65f57;
}
</style>
</head>
<body>

<div id="box">
<div id="child">Hello world</div>
</div>

</body>
</html>

效果:

5.页面居中

方法一:

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>居中</title>
<style>
#child {
width:100px;
height:100px;
background:aqua;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
</style>
</head>
<body>

<div id="child">Hello world</div>

</body>
</html>

效果:

方法二:

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>居中</title>
<style>
#child {
width:100px;
height:100px;
background:aqua;
position:absolute;
top:50%;
left:50%;
margin-left:-50px;
margin-bottom:-50px;
}
</style>
</head>
<body>

<div id="child">Hello world</div>

</body>
</html>

效果:

方法三:

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>居中</title>
<style>
#child {
background:aqua;
position: absolute;
width: 6em;
height: 6em;
top: calc(50% - 3em);
left: calc(50% - 3em);
}
</style>
</head>
<body>

<div id="child">Hello world</div>

</body>
</html>

效果:

方法四:

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>居中</title>
<style>
#child {
background: #999999;
position: absolute;
top:50%;
left:50%;
transform:translate(-50% -50%);
}
</style>
</head>
<body>

<div id="child">Hello world</div>

</body>
</html>

效果:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航