在不确定自身宽度的情况下，用 CSS 实现元素水平居中的2种方法

约定不等于承诺〃 2023-06-08 06:38 13阅读 0赞

镜像文章：[在不确定自身高度的情况下，用 CSS 实现元素垂直居中的3种方法][CSS _3]

# 方法一 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1YW5nc1Rpbmc_size_16_color_FFFFFF_t_70]

<div class="wrap">
      <div class="inner">html ： 让 inner 水平居中</div>
    </div>
    
    <style> .wrap { float: left;/* 为了让 wrap 的宽度等于 inner 的宽度 */ position: relative; left: 50%; background: blanchedalmond; } .inner { position: relative; left: -50%; background: rgba(1,1,1,0.2); } </style>

# 方法二 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1YW5nc1Rpbmc_size_16_color_FFFFFF_t_70 1]

<div class="box">
    　　<div class="box2">
    　　　　<a href="#">测试文件</a>
    　　　　<a href="#">测试文件</a>
    　　　　<a href="#">测试文件</a>
    　　</div>
    </div>
    
    <style> .box{ text-align:center; } .box2{ display:inline-block; *display:inline; *zoom:1; } </style>

[CSS _3]: https://blog.csdn.net/HuangsTing/article/details/100521783
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1YW5nc1Rpbmc_size_16_color_FFFFFF_t_70]: /images/20230531/2c3246296f4e493295832cba2eb2b061.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1YW5nc1Rpbmc_size_16_color_FFFFFF_t_70 1]: /images/20230531/7c2a9b65880b4bce86cb71c4d0202939.png

发表评论取消回复

表情：

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

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

相关阅读

相关在不确定自身高度的情况下，用 CSS 实现元素垂直居中的3种方法

像文章：[在不确定自身宽度的情况下，用 CSS 实现元素水平居中的2种方法][CSS _2] **1.不知道自己高度的情况下, 利用绝对定位只需要以下三行（推荐）** ...

叁歲伎倆/ 2024年04月18日 07:14/ 0 赞/ 10 阅读

相关 CSS中实现元素居中的几种方法总结

一、使用 text-align: center 居中使用 text-align: center; 可以在CSS中实现内联元素的水平居中。这个技术利用了CSS的 text

落日映苍穹つ/ 2024年02月20日 11:43/ 0 赞/ 64 阅读

相关 css元素水平和垂直同时居中的四种方法

“如何实现任何元素的水平垂直居中？”前端面试常常会被问到这个似乎挺不起眼没技术含量的问题，有的朋友也就支支吾吾模模糊糊地回答面试官。这里分享四种实现元素水平垂直居中的方法，简单

心已赠人/ 2023年07月18日 14:11/ 0 赞/ 18 阅读

相关在不确定自身宽度的情况下，用 CSS 实现元素水平居中的2种方法

镜像文章：[在不确定自身高度的情况下，用 CSS 实现元素垂直居中的3种方法][CSS _3] 方法一 ![在这里插入图片描述][watermark_type_ZmFu

约定不等于承诺〃/ 2023年06月08日 06:38/ 0 赞/ 14 阅读

相关让元素水平垂直居中的四种方法

一、使用flex弹性布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/

曾经终败给现在/ 2022年11月27日 07:09/ 0 赞/ 176 阅读

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

CSS 水平垂直居中的方法 CSS 水平垂直居中的方法水平居中水平垂直居中 HTML文件模板居中元

谁践踏了优雅/ 2022年10月22日 05:25/ 0 赞/ 257 阅读

相关 CSS 实现元素水平垂直居中的 N 种方式

点击上方三分钟学前端，关注公众号回复交流，加入前端编程面试算法每日一题群面试官也在看的前端面试资料 ![ba40f0ea9cf747c0909f83922c3

╰+哭是因爲堅強的太久メ/ 2022年09月04日 03:59/ 0 赞/ 111 阅读

相关 CSS实现元素水平/垂直居中的方法

首先，我们来了解水平居中,它有很多种方法，我们暂时先来了解其中的几种： 1. 在实现方案中，我们最熟悉的莫过于给元素定义一个宽度，然后使用margin：

本是古典何须时尚/ 2022年07月16日 01:59/ 0 赞/ 283 阅读

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

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

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

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

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

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