css布局：块级元素的居中

最新推荐文章于 2024-09-14 17:04:32 发布

前端老码农

最新推荐文章于 2024-09-14 17:04:32 发布

阅读量134

点赞数

分类专栏：前端文章标签： css

原文链接：https://www.mk2048.com/blog/blog.php?id=hihia1j020hj&title=css%E5%B8%83%E5%B1%80%EF%BC%9A%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0%E7%9A%84%E5%B1%85%E4%B8%AD

版权

前端专栏收录该内容

2065 篇文章 12 订阅

订阅专栏

一.定宽：

1.定位居中(absolute)

方法一：

html:
<div class="main"></main>

css:
.main{
  width:400px;
  height:200px;
  background:#eee;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-200px;
  margin-top:-100px;
}

方法二：

html:

<div class="main"></div>
css:

body {
    height: 100%;
}
.main{
 width: 400px;
   height: 200px; 
  background:#eee;
  position:absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

二.非定宽：

1.定位居中(absolute translate)

html:

<div class="main">
    hello world
</div>
css:

.main{
  background:#eee;
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
}

2.flex布局

html:

    <body>
        <div class="main">
        </div>
    </body>
css:

html,body{
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    justify-content:center;
    align-items:center;
}
.container{
    width: 400px;
    height: 200px;
    background: #ccc;
}

3.table

html:

<body>
    <div class="container">
        <div class="main">
            <div class="inner"></div>
        </div>
    </div>
</body>
css:

 
html,body{
     height: 100%;
}
.container{
    width:100%;
    height:100%;        
    display: table;
}
.main {
    display: table-cell;
    vertical-align: middle;
}
.inner{
    width: 400px;
    height: 200px;
    background: #ccc;
    margin:0 auto;
}

更多专业前端知识，请上【猿2048】www.mk2048.com