md-Blog，基于.md文件生成的MarkDown博客系统。 简单、实用、归纳、管理。
Powered by md-Blog  文 - 篇  访客 -

面试中的Div水平垂直居中定位问题


  分类：HTML5+CSS3  / 
更新：2020-11-01 17:25:38  /  创建：2020-04-07 13:45:32
不要删除
99% 的面试都会问到，而且会放在前几个问题中。原因很简单，连基础定位都搞不定，谈何开发呢？请看这里推荐的答案。
  • box1 通过 position: absolute; 方式 居中定位
  • box2 通过 display: flex; 方式 居中定位
  • 当然还有table的cell写法，由于工作中该方式比较迁就，暂不讨论
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Auto</title>
<style>
    html,body{
        margin: 0;
        padding: 0;
    }
    .box1{
        position: absolute;
        width: 100px;
        height: 100px;
        background: gray;
        left: 50%;
        margin: -50px 0 0 -50px;
        top: 50%;
    }
    .wrapper{
        display:flex;
        justify-content: center;    /* 水平居中 */
        align-items:center;         /* 垂直居中 */
        height: 500px;          /* 垂直居中需要定义高度 */
    }
    .box2{
        width: 100px;
        height: 100px;
        background: #F60;
    }
</style>
</head>
<body>
    <!-- absolute -->
    <div class="box1"></div>
    <!-- flex -->
    <div class="wrapper">
        <div class="box2"></div>
    </div>
</body>
</html>

再来一个神奇版的:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
.content {
  width: 200px;
  height: 200px;
  background-color: #6699ff;
  margin: auto; /*很关键的一步*/
  position: absolute; /*父元素需要相对定位*/
  left: 0;
  top: 0;
  right: 0;
  bottom: 0; /*让四个定位属性都为0*/
}
</style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

不要删除

小站不易，感谢支持！