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

缺乏、安全感 2022-03-11 09:48 148阅读 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 条评论，148人围观）

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

相关阅读

相关第六章图论 4 AcWing 1577. 条条大路通罗马

第六章图论 4 AcWing 1577. 条条大路通罗马原题链接 [AcWing 1577. 条条大路通罗马][AcWing 1577.] 算法标签图

清疚/ 2023年09月24日 14:23/ 0 赞/ 70 阅读

相关导航条动态居中

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

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

相关 CSS简约垂直导航工具条

[下载地址][Link 1]简约的垂直样式导航工具条样式，hover悬停黑色竖直的图标导航工具栏，悬停冒泡文字提示效果。可用于功能性网页工具栏ui布局特效。 ![163156

水深无声/ 2022年09月12日 04:41/ 0 赞/ 177 阅读

相关 LinearLayout 垂直滚动条

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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