flex实现子块的完美居中
方案
父块使用display:flex属性,子块margin自适应即可实现
代码
index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>块状元素垂直居中(已知高度)</title>
<style>
*{margin: 0;padding: 0;}
.parent{
display: flex;
height:500px;
background: #03A1FA;
}
.child{
width: 100px;
height: 100px;
margin: auto;
background: #BB3713;
}
/*
这个依赖于设置“margin”值为“auto”值，自动获取伸缩容器中剩余的空间。所以设置垂直方向margin值为“auto”，可以使伸缩项目在伸缩容器的两上轴方向都完全集中。
*/
</style>
</head>
<body>
<div class="parent">
<div class="child">ff</div>
</div>
</body>
</html>
未知宽高元素实现水平垂直居中
方案
使用transform:translate属性来调整
代码
index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>块状元素水平垂直居中(未知宽高)</title>
<style>
*{margin: 0;padding: 0;}
/*简易版reset,工作环境不推荐使用*/
#container{
position:absolute;
top:50%;
left:50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
background-color: #A4FF00;
color:rgb(33, 172, 134);
}
/*因为不知道宽高度,所以主要用translate属性拉回未知元素XY轴上的位置实现居中*/
/*若是单纯实现未知高度的元素居中,只要用到transform:translateY(-50%)即可实现*/
</style>
</head>
<body>
<div id="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae obcaecati expedita ducimus, rem laborum veniam qui quo facilis enim. Repellat blanditiis nemo, magnam, sequi illum perferendis consequatur modi maiores quaerat?</div>
</body>
</html>
flex实现页面水平垂直居中
方案
定义居中元素的父元素justify-content和align-items属性为center即可,需要设置足够的高度,不然只有水平居中效果
代码实现
index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>flex实现子块的完美居中</title>
<style>
* {
margin: 0;
padding: 0;
}
.parent {
display: flex;
justify-content: center;
align-items: center;
height:900px;
background: #03A1FA;
}
.child {
width: 100px;
height: 100px;
background: #BB3713;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">啦啦德玛新亚</div>
</div>
</body>
</html>
时间： 2024-10-17 10:19:20