垂直居中：两方向，四方法，条条大路通罗马

缺乏、安全感 2022-03-11 09:48 168阅读 0赞

# 垂直居中常见的四种方法总结 #

两条路，即 flex box 或者 绝对定位。

四种方法，分别如下：

## 方向一： flex box ##

#container{
      display: flex;
      justify-content: center;
      align-items: center;
    }

## 方向二：绝对定位 ##

### 2.1 先把顶点移动到中心，再挪回自身长宽的一半（transform-translate） ###

#container{
      ...
      position:relative;
     }
     #center{
      ...
      position:absolute;
      top:50%;
      left:50%; // 这三行，使得小方块的顶点（左上）相对于大方块的顶点居中了。
    
      transform: translate(-50%,-50%); // transform 的 translate 属性是相对于自身的， 顶点已经居中了，再相对自身往回移动一般，就把中心移到原来顶点所处的中心了。这样整个图形就居中了。
     }

### 2.2 先把顶点移动到中心，再挪回自身长宽的一版（直接用计算宽度并用负 margin） ###

#container{
      ...
      position: relative;
     }
     #center{
      position: absolute;
      top: 50%;
      left: 50%; // 同上
       
      margin: -50px; // 与上面同理。只不过是用 -margin 往回找，这个数字分别是一半的高度 和 一半的宽度; 需要知道自身宽度
     }

### 2.3 横竖两个两边都是 margin 为 0 的居中 ###

#container{
      ...
      position: relative;
     }
     #center{
       position: absolute;
    
       margin:auto; // 相当于两个两边都是 0 的 margin 居中
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
     }

发表评论取消回复

表情：

评论列表（有 0 条评论，168人围观）

还没有评论，来说两句吧...

相关阅读

相关不固定宽高的居中方法（水平和垂直方向的）

display: inline-block; margin:0 auto; position: relative; top:50%; t

青旅半醒/ 2023年06月10日 05:22/ 0 赞/ 2 阅读

相关水平垂直居中方法

<div id="father"> <div id="son"> </div> </div>

ゝ一纸荒年。/ 2023年06月06日 10:57/ 0 赞/ 6 阅读

相关导航条动态居中

导航条动态居中效果： ![在这里插入图片描述][20200907172208399.gif_pic_center] 备注都在代码里了，各位看官请自便。代码

落日映苍穹つ/ 2022年12月04日 09:17/ 0 赞/ 171 阅读

相关 LinearLayout 垂直滚动条

activity中经常只是一个LinearLayout，但这样的话，如果activity内容超过一屏，无法滚动查看下面的内容。这时只需在外面嵌套一个ScrollView就可

系统管理员/ 2022年08月09日 15:56/ 0 赞/ 238 阅读

相关图片在div中垂直方向居中，垂直居中

原理：利用vertical-align实现垂直，决定行高的是行内最高的元素的值。 css 属性： div \{ height:600px; width:600px

港控/mmm°/ 2022年07月16日 01:46/ 0 赞/ 239 阅读

相关 GIS就业参考系列之方向篇——条条大道通罗马

题记从2007——2017，职场中第一个十年即将完成。十年足以摧毁一个人的样貌；十年可以见证一个时代的发展；十年你从匆匆那年转变为而立之年；不知道从毕业一直还在从

妖狐艹你老母/ 2022年07月13日 08:12/ 0 赞/ 236 阅读

相关【CSS】fixed绝对定位水平垂直居中不随滚动条而移动

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

ゞ浴缸里的玫瑰/ 2022年05月24日 23:07/ 0 赞/ 199 阅读

相关前端垂直居中方法大全

定位 .div1{ /优点:所有浏览器支持/ /缺点：固定宽高，灵活性不好/ /法一/ /position: absolute;/ /法二/ position:

Love The Way You Lie/ 2022年05月17日 07:57/ 0 赞/ 134 阅读

相关垂直居中：两方向，四方法，条条大路通罗马

垂直居中常见的四种方法总结两条路，即 flex box 或者绝对定位。四种方法，分别如下：方向一： flex box container{

缺乏、安全感/ 2022年03月11日 09:48/ 0 赞/ 169 阅读

相关 easyui tabs 使用iframe 出现两个垂直滚动条解决方法

最近在使用easyui-tabs加iframe时，出现了两个垂直滚动条的现象，如下图所示 ![两个垂直滚动条的效果][SouthEast] 前端代码如下：

拼搏现实的明天。/ 2021年08月26日 12:14/ 0 赞/ 407 阅读