CSS：css垂直居中，水平居中，垂直水平居中面试题（五星）
1.垂直居中实现：
法一：父元素 display:flex,align-items:center;
弹性布局 display: flex。设置 align-items: center; justify-content: center;
css：
<style>
.container {
width: 300px;
height: 200px;
border: 3px solid #546461;
/* display: -webkit-flex; */
display: flex;
/* -webkit-align-items: center; */
align-items: center;
}
.inner {
width: 100px;
height: 100px;
border: 3px solid #458761;
}
</style>
html：
<body>
<div class="container">
<div class="inner"></div>
</div>
</body>
法二：元素绝对定位，top:50%，margin-top：-（高度/2）
父元素固定宽高，利用定位及设置子元素 margin 值为自身的一半。
<style>
.container {
width: 300px;
height: 300px;
position: relative;
border: 1px solid #465468;
}
.inner {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
/*height 的一半*/
margin-top: -50px;
border: 1px solid #1470f0;
}
</style>
<div class="container">
<div class="inner"></div>
</div>
法三：高度不确定用 transform：translateY（-50%）
css3 属性 transform。子元素设置 position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%);即可。
<style>
.container {
width: 300px;
height: 300px;
position: relative;
border: 1px solid #465468;
}
.inner {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
transform: translate(0, -50%);
border: 1px solid #3a9f1b;
}
</style>
<div class="container">
<div class="inner"></div>
</div>
法四：父元素 table 布局，子元素设置 vertical-align:center;
将父元素设置成 display: table, 子元素设置为单元格 display: table-cell。
<style>
.container {
width: 300px;
height: 300px;
border: 1px solid #555;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.inner {
width: 100px;
height: 100px;
/* vertical-align: middle; */
border: 1px solid rgb(192, 16, 16);
}
</style>
<div class="container">
<div class="inner"></div>
</div>
法五：父元素固定宽高，子元素设置 position: absolute，margin：auto 平均分配 margin
父元素固定宽高，子元素设置 position: absolute，margin：auto 平均分配 margin
<style>
.container {
width: 300px;
height: 300px;
position: relative;
border: 1px solid #465468;
}
.inner {
width: 100px;
height: 100px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
border: 1px solid #1470f0;
}
</style>
<div class="container">
<div class="inner"></div>
</div>
2.水平居中实现：
1.margin:0 auto
<style>
.container {
width: 300px;
height: 300px;
border: 1px solid #465468;
}
.inner {
width: 100px;
height: 100px;
margin: 0 auto;
border: 1px solid #1470f0;
}
</style>
<div class="container">
<div class="inner"></div>
</div>
2.transfrom实现
<style>
.container {
width: 300px;
height: 300px;
position: relative;
border: 1px solid #465468;
}
.inner {
width: 100px;
height: 100px;
position: absolute;
margin: auto;
left: 50%;
transform: translate(-50%, 0);
border: 1px solid #1470f0;
}
</style>
<div class="container">
<div class="inner"></div>
</div>
3.flex布局
<style>
.container {
width: 300px;
height: 300px;
border: 1px solid #546461;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
}
.inner {
width: 100px;
height: 100px;
border: 1px solid #1470f0;
}
</style>
<div class="container">
<div class="inner"></div>
</div>
4.margin 负值法
<style>
.container {
width: 300px;
height: 300px;
border: 1px solid #379;
position: relative;
}
.inner {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
/*width 的一半*/
margin-left: -50px;
border: 1px solid rgb(185, 69, 15);
}
</style>
<div class="container">
<div class="inner"></div>
</div>
5.margin:auto 法
<style>
.container {
width: 300px;
height: 300px;
position: relative;
border: 1px solid #465468;
}
.inner {
width: 100px;
height: 100px;
position: absolute;
margin: auto;
left: 0;
right: 0;
border: 1px solid #1470f0;
}
</style>
<div class="container">
<div class="inner"></div>
</div>
3.垂直水平居中实现：
1.定位，transform（对元素进行旋转、缩放、移动或倾斜），需考虑浏览器兼容问题。
利用绝对定位，先将元素的左上角通过 top:50%和 left:50%定位到页面的中心，然后再通过 translate 来调整元素的中心点到页面的中心。该方法需要考虑浏览器兼容问题。
<style>
.container {
width: 300px;
height: 300px;
border: 1
剩余60%内容，订阅专栏后可继续查看/也可单篇购买
前端面试题 文章被收录于专栏
前端面试的一些常问问题、问题的具体实现（可直接运行）以及底层原理
查看17道真题和解析
投递大疆等公司10个岗位
深信服公司福利 728人发布