CSS水平居中和垂直居中
程序员文章站
2022-04-24 20:46:21
...
总结的几种水平居中和垂直居中方法。
先上效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Position</title>
<link rel="stylesheet" href="style.css">
<style type="text/css">
#center-hor1{
background-color: red;
color: #F8CBAD;
top: 50%;
left :50%;
width: 100px;
position: absolute;
/*transform: translateY(-50%); !*防止多行出现的对齐问题*!*/
transform: translate(-50%, -50%);
}
#center-hor2 {
position:absolute;
color: #F8CBAD;
width:100px;
height:100px;
top:50%;
left:50%;
margin-top:-50px; /*height的一半*/
margin-left:-50px;/*width的一半*/
background:red;
}
#center-hor3{
background-color: red;
color: #F8CBAD;
width: 100px;
height: 100px;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
}
#center-ohor1 {
background-color: red;
color: #F8CBAD;
position: relative;
top: 50%;
transform: translateY(-50%); /*防止多行出现的对齐问题*/
}
#center-ver1 {
background-color: red;
color: #F8CBAD;
border: 1px black solid;
display: inline-block;
width: 150px;
}
#center-ver2 {
background-color: red;
color: #F8CBAD;
border: 1px black solid;
width: 150px;
margin: 0 auto;
text-align: center;/*让文本居中*/
}
#center-ver3 {
display: flex;
flex-direction: row;/*主轴方向row为默认*/
justify-content: center;/*主轴对齐方式*/
align-items: center;
}
#center-ver3 div {
width: 50px;
height: 100px;
border: 1px black solid;
}
#center-ver4 {
display: flex;
flex-direction: column;/*主轴为列*/
justify-content: center;/*主轴对齐方式*/
align-items: center;
}
#center-ver4 div {
height: 50px;
width: 100px;
border: 1px black solid;
}
ul > li {
border: 1px black solid;
width: 200px;
}
ul > li > span {
color: blueviolet;
}
</style>
</head>
<body style='margin:0;padding:0;background:#BDD7EE;color:white;'>
<div style="display: flex">
<div>
<div style="width: 300px ;border: black 1px solid; position: relative">
<div id="center-hor1">父元素有高度或者父元素无高度，高度由子元素撑开</div>
<div style="height: 200px ;color: black">方式1(注意使用了transform)</div>
</div>
<div style="width: 300px ;border: black 1px solid; position: relative">
<div id="center-hor2">父元素有高度或者父元素无高度，高度由子元素撑开</div>
<div style="height: 200px ;color: black">方式2(不能微调)</div>
</div>
<div style="width: 300px ;border: black 1px solid; position: relative">
<div id="center-hor3">父元素有高度或者父元素无高度，高度由子元素撑开</div>
<div style="height: 200px ;color: black">方式3(能微调)</div>
</div>
<div style="width: 300px ;height:200px;border: black 1px solid;">
<div id="center-ohor1">父元素有高度且只有一个子元素,不会出现普通流以为的标签</div>
</div>
</div>
<div style="border: 1px black solid ;width: 300px;height: 806px;">
<div style="text-align: center;width: 300px;height: 200px;">
<span id="center-ver1">使用text-align可以使行内元素居中,不能用于块级元素。好处是简单</span>
</div>
<div style="width: 300px;height: 200px; border: 1px black solid;">
<div id="center-ver2">使用margin,适合于定宽</div>
</div>
<div id="center-ver3" style="width: 300px;height: 200px; border: 1px black solid;">
<div>1</div>
<div style="color: black">这个布局和下面的都是使用flex,flex对于位置控制很强大，能创造一些很麻烦的布局</div>
<div>3</div>
</div>
<div id="center-ver4" style="width: 300px;height: 200px; border: 1px black solid;">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
</div>
<ul>
<li style="display: inline-block">
<span>同行方式1上面表格使用的(使用flex布局专门用来折腾对齐布局)</span>
</li>
<li style="display: inline-block">
<span>同行方式2 (使用行内块+表格 单纯做做子元素是行内元素的还好 像上面那种不行)</span>
</li >
</ul>
</body>
</html>style.css文件
body .contain{
margin:10px;
border:10px solid white;
width:300px;
background:#F8CBAD;
padding:10px 0 0 10px;
font-size:20px;
font-weight:bold;
}
.one {
width:50px;
height:50px;
background-color:#FFE699;
top:-10px;
left:0px;
position: relative;
}
.two {
height:50px;
color:#fff;
background-color:#C5E0B4;
}