CSS居中显示div的常用方法

1周前 35次点击 来自 前端

原文链接:css居中div的几种常用方法

1. text-align:center

水平居中块级元素中的行内元素,如inline,inline-block;

<style>
.center{
  text-align:center;
}
center_text{
  display:inline-block;
  width:500px
}
</style>
<div class="center">
  <span class="center_text">
    123
  </span>
</div>

2. margin:0 auto

对齐方式要求内部元素(.content_text)是块级元素,并且不能脱离文档流(如设置position:absolute),否则无效

<style>
center_text{
  display:block;
  width:500px;
       margin:0 auto;
}
</style>
<div class="center">
  <span class="center_text">
    我是块级元素,我是块级元素,我给自己设了display:block
  </span>
</div>

3. 脱离文档流的居中方式

这种通常应用在自定义弹框当中,把背景层设置成透明灰色,内容居中显示在最前面。

<style>
.mask{
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  filter: alpha(opacity=30);
  -ms-filter: "alpha(opacity=30)";
  opacity: .3;
  z-index: 10000;
}
.center{
    display: block;
    position: fixed;
    _position: absolute;
    top: 50%;
    left: 50%;
    width: 666px;
    height:400px;
    margin-left: -333px;
    margin-top: -200px;
    z-index: 10001;
    box-shadow: 2px 2px 4px #A0A0A0, -2px -2px 4px #A0A0A0;
    background-color: #fff;
}
</style>
<div class="mask">
  <div class="content"><br>    我是要居中的板块
  </div>
</div>

4. display:table-cell

display:table-cell配合width,text-align:center,vertical-align:middle让大小不固定元素垂直居中,这个方式将要对其的元素设置成为一个td,float、absolute等属性都会影响它的实现,不响应margin属性;

<style>
.center {
  display: table;
  width: 100%;
}
.center_text {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
</style>
<div class="center">
  <div class="center_text">
    1111111<br>  </div>
</div>

5. 垂直居中

行内元素的垂直居中把height和line-height的值设置成一样的即可

<sytle>
center{
  height:40px;
  line-heigth:40px;
	}
</style>
<div class="center">
  <span class="center_text">
    我是要居中的内容<br>  </span>
</div>

6. 使用css3的translate水平垂直居中元素

这种方式将脱离文档流的元素,设置top:50%,left:50%,然后使用transform来向左向上偏移半个内元素的宽和高

<style>
.center {
    position: relative;
    height: 500px;}
.center_text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 600px;
}
</style>
<div class="center">
  <div class="center_text">
    我是要居中的内容<br>  </div> <br></div>

7. 使用css3计算的方式居中元素calc

这种方式同样是将脱离文档流的元素,然后使用计算的方式来设置top和left;

<style>
.center {
    position: relative;
    height: 300px;
    width: 1000px;
    border: 1px solid #ccc;
}
.center_text{
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 150px);
    width: 300px;
    height: 100px;
    border: 1px solid #000;
}
</style>
<div class="center">
  <div class="center_text">
    我是要居中的内容<br>  </div>
</div>
Card image cap
开发者雷

尘世间一个小小的开发者,每天增加一些无聊的知识,就不会无聊了

要加油~~~

技术文档 >> 系列应用 >>
热推应用
Let'sLearnSwift
学习Swift的入门教程
PyPie
Python is as good as Pie
标签