垂直居中

小阿妍
298 阅读4分钟

水平居中很好处理

margin:0 auto;或是text-align:center;

水平居中很好处理，垂直居中比较麻烦。

垂直居中的方法

01设置行高（line-height），适用于单行

  • 若 例如单行的标题，或是已经设为inline-block属性的div，若将line-height设成和高度一样的数值，则内容的行内元素就会被垂直置中，因为是行高，所以会在行内元素的上下都加上行高的1/2，所以就垂直置中了！
.div0{
    width:200px;
    height:150px;
    line-height:150px;
    text-align:center;
}
.redbox{
    display:inline-block;
    width:30px;
    height:30px;
    background:#c00;
}
  • 在父元素里面，line-height的高度设置为和高度一样，子元素的display为inline-block，，子元素就会竖直居中了。

image.png

02 添加伪元素( ::before、::after )

刚刚第一种方法，虽然是最简单的方法(适用于单行标题)，不过就是只能单行，所以我们如果要让多行的元素也可以垂直居中，就须要使用伪元素的方式; -在此之前，先解释一下CSS里头vertical-align这个属性，这个属性虽然是垂直置中，不过却是指在元素内的所有元素垂直位置互相置中，并不是相对于外框的高度垂直居中。(下面的CSS会造成这种样子的垂直居中)

image.png

  • 利用::before和::after添加div进到框框内，让这个「伪」div的高度100%,就可以轻松地让其他的div都居中。不过不过不过！div记得要把display设为inline-block，毕竟 vertical-align:middle 是针对行内元素，div本身是block，所以必须要做更改！
.div0::before{
    content:'';
    width:0;
    height:100%;
    display:inline-block;
    position:relative;
    vertical-align:middle;
    background:#f00;
}

03

03绝对定位

  • 父元素相对定位，子元素绝对定位；
  • 子元素上下左右的数值都设为0，再搭配一个margin:auto；
.use-absolute{
    position: relative;
    width:200px;
    height:150px;
    border:1px solid #000;
}
.use-absolute div{
    position: absolute;
    width:100px;
    height:50px;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    background:#f60;
}

04使用flex布局

  • Flexbox可谓是我们在移动端用的最多的布局方法，因为大部分现代手机浏览器都支持这个方法了。
  • 使用align-items或align-content的属性，轻轻松松就可以做到垂直居中的效果喔！
.use-flexbox{
    display:flex;
    align-items:center;
    justify-content:center;
    width:200px;
    height:150px;
    border:1px solid #000;
}
.use-flexbox div{
    width:100px;
    height:50px;
    background:#099;
}

05 transform

transform是CSS3的新属性，主要用于元素的变形、旋转和位移，利用transform里头的translateY (改变垂直的位移，如果使用百分比为单位，则是以元素本身的长宽为基准)，搭配元素本身的top属性，就可以做出垂直居中的效果，需要注意的地方是，子元素必须要加上position:relative，不然就会没有效果喔。

.use-transform{
    width:200px;
    height:200px;
    border:1px solid #000;
}
.use-transform div{
    position: relative;
    width:100px;
    height:50px;
    top:50%;
    transform:translateY(-50%);
    background:#095;
}

1.table自带功能，table表格里面的内容都是自动居中的；

<table class="parent">
<tr>
<td class="child">
这里面的内容是居中的
</td>
</tr>
</table>

100%高度的after before加上inlne block

  • 正常的div的parent和child，然后再parent的前后加上before和after的伪元素；
  • child和before和after的display都是inline-block，vertical-align: middle;
<body>
  <div class="parent">
    <div class="child">
      一串文字,居中垂直的
    </div>
  </div>
</body>
  • 下面是CSS的，height已经写死了
.parent{
  height: 600px;
  text-align: center;
}

.child{
  display: inline-block;
  width: 300px;
  vertical-align: middle;
}

.parent:before{
  content:'';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.parent:after{
  content:'';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

div装成table

直接在div标签里面，class变成table，

<body>
  <div class="table">
      <div class="td">
        <div class="child">
          一串文字
        </div>
    </div>
  </div>
</body>
  • 下面是css样式
div.table{
  display: table;
  border: 1px solid red;
  height: 600px;
}

div.tr{
  display: table-row;
  border: 1px solid green;
}

div.td{
  display: table-cell;
  border: 1px solid blue;
  vertical-align: middle;
}
.child{
  border: 10px solid black;
}

margin-top 等于50%

transform 为-50%

<body>
  <div class="parent">
    <div class="child">
      一串文字
    </div>
  </div>
</body>


.parent{
  height: 600px;
  border: 1px solid red;
  position: relative;
}
.child{
  border: 1px solid green;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

absolute margin auto

<body>
  <div class="parent">
    <div class="child">
      一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
    </div>
  </div>
</body>


.parent{
  height: 600px;
  border: 1px solid red;
  position: relative;
}
.child{
  border: 1px solid green;
  position: absolute;
  width: 300px;
  height: 200px;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

Flex方法

<body>
  <div class="parent">
    <div class="child">
      一串文字
    </div>
    
  </div>
</body>

.parent{
  height: 600px;
  border: 3px solid red;
  
  display: flex;
  justify-content: center;
  align-items: center;
}
.child{
  border: 3px solid green;
  width: 300px;
}
avatar
文章
阅读
粉丝