盒子水平垂直居中的11种方案

向右看齐 2022-12-10 07:16 126阅读 0赞

### 1、定位+margin拉回 ###

<style> #box { width: 100px; height: 100px; position: relative; background-color: #ff0; } #block { width: 30px; height: 30px; background-color: aqua; position: absolute; top: 50%; left: 50%; margin-left: -15px; margin-top: -15px; } </style>
      <body>
        <div id="box">
          <span id="block">1</span>
        </div>
      </body>

### 2、定位+transform拉回 ###

<style> #box { width: 100px; height: 100px; position: relative; background-color: #ff0; } #block { width: 30px; height: 30px; background-color: aqua; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style>
      <body>
        <div id="box">
          <span id="block">1</span>
        </div>
      </body>

### 3、绝对定位各方向0+margin: auto ###

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uyp9Oj9w-1600935943593)(https://imgkr2.cn-bj.ufileos.com/32bad828-b643-435a-8ea4-7b33e33af9c6.png?UCloudPublicKey=TOKEN\_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=Wzd63dY4h8%252FrQxkUOlOSmcupdSs%253D&Expires=1601021167)\]

<style> #box { width: 100px; height: 100px; position: relative; background-color: #f00; } #block { width: 30px; height: 30px; background-color: #ff0; position: absolute; left: 0; bottom: 0; right: 0; top: 0; margin: auto; } </style>
      <body>
        <div id="box">
          <span id="block">1</span>
        </div>
      </body>

### 4、flex布局 + 设置水平垂直居中 ###

<style> #box { width: 100px; height: 100px; background-color: brown; display: flex; justify-content: center; align-items: center; } #block { width: 30px; height: 30px; background-color: #f0f; } </style>
      <body>
        <div id="box">
          <span id="block">1</span>
        </div>
      </body>

### 5、flex布局 + margin: auto ###

<style> #box { width: 100px; height: 100px; background-color: brown; display: flex; } #block { width: 30px; height: 30px; background-color: #f0f; margin: auto; } </style>
      <body>
        <div id="box">
          <span id="block">1</span>
        </div>
      </body>

###  ###

### 6、display: table-cell vertical-align text-align 组合使用 ###

<style> #box { width: 100px; height: 100px; background-color: #0ff; display: table-cell; text-align: center; // 子元素需要设置行内属性 vertical-align: middle; } #block { width: 30px; height: 30px; background-color: #00f; display: inline-block; } </style>
      <body>
        <div id="box">
          <div id="block">b</div>
        </div>
      </body>

注意子元素需要设置行内属性， text-align: center; 才会让元素居中 触发IFC

### 7、display: box; 设置box-align和box-pack center ###

<style> #box { width: 100px; height: 100px; background-color: #0ff; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; } #block { width: 30px; height: 30px; background-color: orange; } </style>
      <body>
        <div id="box">
          <div id="block">1</div>
        </div>
      </body>

注意各浏览器的兼容问题，注意前缀

### 8、display: grid 布局 display: grid + place-items:center ###

<style> #box { width: 100px; height: 100px; background-color: #0ff; display: grid; place-items: center; } #block { width: 30px; height: 30px; background-color: orange; } </style>
      <body>
        <div id="box">
          <span id="block"></span>
        </div>
      </body>

或者通过设置网格区域

<style> #box { width: 100px; height: 100px; background-color: #0ff; display: grid; grid-template-rows: 1fr 30px 1fr; grid-template-columns: 1fr 30px 1fr; } #block { width: 30px; height: 30px; background-color: orange; grid-area: 2/2/3/3; } </style>
      <body>
        <div id="box">
          <span id="block"></span>
        </div>
      </body>

对文字内容不友好。 会造成文字不居中，不建议使用

###  ###

### 9、display: inline-block; 利用IFC，行内元素撑开高度设置vertical-align ###

<style> #box { width: 100px; height: 100px; background-color: #ff0; text-align: center; } #block { /* 形成IFC， 父元素设置 text-align: center; 居中子元素，vertical-align: middle; 居中其他兄弟元素*/ width: 0px; height: 100px; background-color: #f00; display: inline-block; vertical-align: middle; opacity: 0; } #block2 { background-color: #f0f; width: 60px; display: inline-block; } </style>
      <body>
        <div id="box">
          <span id="block">1</span>
          <span id="block2">2</span>
        </div>
      </body>

### 10、利用calc函数动态计算实现 ###

<style> #box { width: 100px; height: 100px; background-color: #0ff; position: relative; } #block { position: absolute; width: 30px; height: 30px; left: -webkit-calc((100px - 30px)/2); top: -webkit-calc((100px - 30px)/2); left: -moz-calc((100px - 30px)/2); top: -moz-calc((100px - 30px)/2); left: calc((100px - 30px) / 2); top: calc((100px - 30px) / 2); background-color: orange; } </style>
      <body>
        <div id="box">
          <div id="block">b</div>
        </div>
      </body>

注意兼容性

### 11、单纯文字水平垂直居中 一般只需要设置text-align和line-height和高度相同 ###

<style> #box { width: 100px; height: 100px; background-color: #0ff; line-height: 100px; text-align: center; } </style>
      <body>
        <div id="box">居中文字</div>
      </body>

发表评论取消回复

表情：

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

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

相关阅读

相关 CSS水平垂直居中的三种方式。

文字在盒子中：`text-align:center; line-height:height;` 子盒子在父盒子中： ①在父盒子中使用flex布局：

我会带着你远行/ 2023年02月28日 05:28/ 0 赞/ 5 阅读

相关面试题：CSS盒子水平居中、垂直居中、水平垂直居中

目录 1. 实现盒子水平垂直居中方法一：定位（1）方法二：定位（2）

比眉伴天荒/ 2023年02月26日 11:28/ 0 赞/ 77 阅读

相关盒子水平垂直居中的11种方案

1、定位+margin拉回 <style> box { width: 100px; height: 100px; position: relative; back

向右看齐/ 2022年12月10日 07:16/ 0 赞/ 127 阅读

相关 div盒子在页面中水平垂直居中的几种方法。

方法一：设置绝对定位absolute，然后margin为自动 <html lang="en"> <head> <meta charset=

谁借莪１个温暖的怀抱￠/ 2022年06月11日 06:43/ 0 赞/ 178 阅读

相关 CSS水平垂直居中的几种方法

方法1： “margin:auto”结合”position:absolute” //css代码： .box1{ width:200px;

╰+攻爆jí腚メ/ 2022年05月17日 21:19/ 0 赞/ 234 阅读

相关 CSS水平居中，垂直居中，水平垂直居中

本文主要介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下： ![640?wx\_fmt=png][640_wx_fmt_png] ![640

小咪咪/ 2022年02月15日 14:53/ 0 赞/ 419 阅读

相关水平居中，垂直居中

一、水平居中（1）行内元素，给其父元素添加text-align:center即可；（2）块状元素，该元素设置margin:0 auto即可；（3）若子元素包含flo

╰+哭是因爲堅強的太久メ/ 2021年12月18日 05:09/ 0 赞/ 421 阅读

相关 CSS垂直水平居中的几种方法

作为一个前端小猴子，不管是面试的时候还是工作中，我们都会或多或少的遇到“使用css居中”的效果，今天就写一篇关于css垂直水平居中的几种方法。 ![aHR0cHM6Ly91c

柔光的暖阳◎/ 2021年10月24日 01:14/ 0 赞/ 786 阅读

相关水平垂直居中的几种实现方式

固定宽高 1.position+margin-top+margin-left .box-container{ position: relati

一时失言乱红尘/ 2021年09月02日 06:29/ 0 赞/ 372 阅读

相关 div盒子水平垂直居中的方法

<div class="wrapper"> 我不知道我的宽度和高是多少，我要实现水平垂直居中。 </div> 一、盒子没有固定的

╰半橙微兮°/ 2021年07月24日 11:26/ 0 赞/ 495 阅读