一个通用的例子 main 元素在页面中高度固定, 希望 main 元素在其中上下垂直居中
<body>
<div class="container">
<main>
<h1>康乐芳华</h1>
<h2>康乐芳华</h2>
</main>
</div>
</body>
-
基于绝对定位以及
transform的方法
body{
text-align: center;
}
.container{
position: relative;
width: 90%;
height: 500px;
margin: 0 auto;
border: 1px solid tomato;
}
main{
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform-style: preserve-3d;
transform: translate(-50%, -50%);
background-color: mediumspringgreen;
}
h1{
color: whitesmoke;
}
h2{
color: grey;
}
缺点是必须要为需要居中的元素设置高度
image.png
-
基于弹性盒子的方法
body{
text-align: center;
}
.container{
display: flex;
width: 90%;
height: 500px;
margin: 0 auto;
border: 1px solid tomato;
}
main{
width: 90%;
margin: auto;
background-color: mediumspringgreen;
}
h1{
color: whitesmoke;
}
h2{
color: grey;
}
网友评论