|
关于CSS 水平+垂直居中的问题，研发代码的过程中，会经常遇到。
那样，在这儿，我会介绍几种方式，来实现CSS的水平+垂直居中。
首要，咱们先将body,html的高度和宽度设置为100%，其次清除默认样式，margin和padding设置为0。
写个宽度和高度均为200px，青色的方块。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<style>
html,body{
bac公斤round:#2d3436;
height:100%;
width:100%;
}
*{
margin:0;
padding:0;
}
.box{
width:200px;
height:200px;
bac公斤round:#81ecec;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
水平居中则能够用 margin: 0 auto;来设置。
咱们都晓得元素平时的默认状态是position = static (静态)。
垂直居中必须使 position = relative ，这般就能够用top 属性，使其移动。
另运用margin-top属性，由于自己是200px高度，因此减去自己一半的高度，就能够垂直居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<style>
body,html{
bac公斤round:#2d3436;
height:100%;
width:100%;
}
*{
margin:0;
padding:0;
}
.box{
width:200px;
height:200px;
bac公斤round:#81ecec;
}
.loca{
margin:0 auto; /* 水平居中 */
position: relative; /* 绝对定位 */
top:50%; /* 偏移 */
margin-top:-100px; /*减去自己高度一半*/
}
</style>
</head>
<body>
<div class="box loca"></div>
</body>
</html>
这般就实现垂直居中的效果。
CSS3的transform的属性亦能够实现向上偏移的效果。
transform:translateY(-50%) 意思是偏移自己高度的一半。
效果如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<style>
body,html{
bac公斤round:#2d3436;
height:100%;
width:100%;
}
*{
margin:0;
padding:0;
}
.box{
width:200px;
height:200px;
bac公斤round:#81ecec;
}
.loca{
margin:0 auto; /* 水平居中 */
position: relative; /* 绝对定位 */
top:50%; /* 偏移 */
/* margin-top:-100px; */
transform:translateY(-50%);
}
</style>
</head>
<body>
<div class="box loca"></div>
</body>
</html>
以上两种办法的代码链接。
另一CSS3中还有种办法 FLEX布局，实现水平垂直居中的办法。
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 阮一峰老师的博客，大众能够瞧瞧，针对布局非常有帮忙。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<style>
body,html{
bac公斤round:#2d3436;
height:100%;
width:100%;
}
*{
margin:0;
padding:0;
}
body{
display:flex;
align-items:center;
justify-content:center;
}
.box{
width:200px;
height:200px;
bac公斤round:#81ecec;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
| 
发表于 2024-6-30 05:29:34
